| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| example.js | 100% | (83 / 83) | 100% | (73 / 73) | 100% | (12 / 12) | 100% | (83 / 83) | |
| lib.npmtest_office_ui_fabric_react.js | 100% | (16 / 16) | 100% | (14 / 14) | 100% | (3 / 3) | 100% | (16 / 16) | |
| test.js | 100% | (54 / 54) | 100% | (39 / 39) | 100% | (13 / 13) | 100% | (54 / 54) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 | 2 2 2 2 2 2 2 1 2 2 2 2 1 2 2 2 2 2 1 2 1 1 1 1 1 1 1 1 1 2 1 1 1 1 2 2 3 3 3 3 1 3 3 3 1 3 1 1 1 1 1 1 1 1 1 1 1 1 6 6 1 2 1 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*
example.js
quickstart example
instruction
1. save this script as example.js
2. run the shell command:
$ npm install npmtest-office-ui-fabric-react && PORT=8081 node example.js
3. play with the browser-demo on http://127.0.0.1:8081
*/
/* istanbul instrument in package npmtest_office_ui_fabric_react */
/*jslint
bitwise: true,
browser: true,
maxerr: 8,
maxlen: 96,
node: true,
nomen: true,
regexp: true,
stupid: true
*/
(function () {
'use strict';
var local;
// run shared js-env code - pre-init
(function () {
// init local
local = {};
// init modeJs
local.modeJs = (function () {
try {
return typeof navigator.userAgent === 'string' &&
typeof document.querySelector('body') === 'object' &&
typeof XMLHttpRequest.prototype.open === 'function' &&
'browser';
} catch (errorCaughtBrowser) {
return module.exports &&
typeof process.versions.node === 'string' &&
typeof require('http').createServer === 'function' &&
'node';
}
}());
// init global
local.global = local.modeJs === 'browser'
? window
: global;
// init utility2_rollup
local = local.global.utility2_rollup || (local.modeJs === 'browser'
? local.global.utility2_npmtest_office_ui_fabric_react
: global.utility2_moduleExports);
// export local
local.global.local = local;
}());
switch (local.modeJs) {
// post-init
// run browser js-env code - post-init
/* istanbul ignore next */
case 'browser':
local.testRunBrowser = function (event) {
Eif (!event || (event &&
event.currentTarget &&
event.currentTarget.className &&
event.currentTarget.className.includes &&
event.currentTarget.className.includes('onreset'))) {
// reset output
Array.from(
document.querySelectorAll('body > .resettable')
).forEach(function (element) {
switch (element.tagName) {
case 'INPUT':
case 'TEXTAREA':
element.value = '';
break;
default:
element.textContent = '';
}
});
}
switch (event && event.currentTarget && event.currentTarget.id) {
case 'testRunButton1':
// show tests
Eif (document.querySelector('#testReportDiv1').style.display === 'none') {
document.querySelector('#testReportDiv1').style.display = 'block';
document.querySelector('#testRunButton1').textContent =
'hide internal test';
local.modeTest = true;
local.testRunDefault(local);
// hide tests
} else {
document.querySelector('#testReportDiv1').style.display = 'none';
document.querySelector('#testRunButton1').textContent = 'run internal test';
}
break;
// custom-case
default:
break;
}
Iif (document.querySelector('#inputTextareaEval1') && (!event || (event &&
event.currentTarget &&
event.currentTarget.className &&
event.currentTarget.className.includes &&
event.currentTarget.className.includes('oneval')))) {
// try to eval input-code
try {
/*jslint evil: true*/
eval(document.querySelector('#inputTextareaEval1').value);
} catch (errorCaught) {
console.error(errorCaught);
}
}
};
// log stderr and stdout to #outputTextareaStdout1
['error', 'log'].forEach(function (key) {
console[key + '_original'] = console[key];
console[key] = function () {
var element;
console[key + '_original'].apply(console, arguments);
element = document.querySelector('#outputTextareaStdout1');
Iif (!element) {
return;
}
// append text to #outputTextareaStdout1
element.value += Array.from(arguments).map(function (arg) {
return typeof arg === 'string'
? arg
: JSON.stringify(arg, null, 4);
}).join(' ') + '\n';
// scroll textarea to bottom
element.scrollTop = element.scrollHeight;
};
});
// init event-handling
['change', 'click', 'keyup'].forEach(function (event) {
Array.from(document.querySelectorAll('.on' + event)).forEach(function (element) {
element.addEventListener(event, local.testRunBrowser);
});
});
// run tests
local.testRunBrowser();
break;
// run node js-env code - post-init
/* istanbul ignore next */
case 'node':
// export local
module.exports = local;
// require modules
local.fs = require('fs');
local.http = require('http');
local.url = require('url');
// init assets
local.assetsDict = local.assetsDict || {};
/* jslint-ignore-begin */
local.assetsDict['/assets.index.template.html'] = '\
<!doctype html>\n\
<html lang="en">\n\
<head>\n\
<meta charset="UTF-8">\n\
<meta name="viewport" content="width=device-width, initial-scale=1">\n\
<title>{{env.npm_package_name}} (v{{env.npm_package_version}})</title>\n\
<style>\n\
/*csslint\n\
box-sizing: false,\n\
universal-selector: false\n\
*/\n\
* {\n\
box-sizing: border-box;\n\
}\n\
body {\n\
background: #dde;\n\
font-family: Arial, Helvetica, sans-serif;\n\
margin: 2rem;\n\
}\n\
body > * {\n\
margin-bottom: 1rem;\n\
}\n\
.utility2FooterDiv {\n\
margin-top: 20px;\n\
text-align: center;\n\
}\n\
</style>\n\
<style>\n\
/*csslint\n\
*/\n\
textarea {\n\
font-family: monospace;\n\
height: 10rem;\n\
width: 100%;\n\
}\n\
textarea[readonly] {\n\
background: #ddd;\n\
}\n\
</style>\n\
</head>\n\
<body>\n\
<!-- utility2-comment\n\
<div id="ajaxProgressDiv1" style="background: #d00; height: 2px; left: 0; margin: 0; padding: 0; position: fixed; top: 0; transition: background 0.5s, width 1.5s; width: 25%;"></div>\n\
utility2-comment -->\n\
<h1>\n\
<!-- utility2-comment\n\
<a\n\
{{#if env.npm_package_homepage}}\n\
href="{{env.npm_package_homepage}}"\n\
{{/if env.npm_package_homepage}}\n\
target="_blank"\n\
>\n\
utility2-comment -->\n\
{{env.npm_package_name}} (v{{env.npm_package_version}})\n\
<!-- utility2-comment\n\
</a>\n\
utility2-comment -->\n\
</h1>\n\
<h3>{{env.npm_package_description}}</h3>\n\
<!-- utility2-comment\n\
<h4><a download href="assets.app.js">download standalone app</a></h4>\n\
<button class="onclick onreset" id="testRunButton1">run internal test</button><br>\n\
<div id="testReportDiv1" style="display: none;"></div>\n\
utility2-comment -->\n\
\n\
\n\
\n\
<label>stderr and stdout</label>\n\
<textarea class="resettable" id="outputTextareaStdout1" readonly></textarea>\n\
<!-- utility2-comment\n\
{{#if isRollup}}\n\
<script src="assets.app.js"></script>\n\
{{#unless isRollup}}\n\
utility2-comment -->\n\
<script src="assets.utility2.rollup.js"></script>\n\
<script src="jsonp.utility2._stateInit?callback=window.utility2._stateInit"></script>\n\
<script src="assets.npmtest_office_ui_fabric_react.rollup.js"></script>\n\
<script src="assets.example.js"></script>\n\
<script src="assets.test.js"></script>\n\
<!-- utility2-comment\n\
{{/if isRollup}}\n\
utility2-comment -->\n\
<div class="utility2FooterDiv">\n\
[ this app was created with\n\
<a href="https://github.com/kaizhu256/node-utility2" target="_blank">utility2</a>\n\
]\n\
</div>\n\
</body>\n\
</html>\n\
';
/* jslint-ignore-end */
Iif (local.templateRender) {
local.assetsDict['/'] = local.templateRender(
local.assetsDict['/assets.index.template.html'],
{
env: local.objectSetDefault(local.env, {
npm_package_description: 'the greatest app in the world!',
npm_package_name: 'my-app',
npm_package_nameAlias: 'my_app',
npm_package_version: '0.0.1'
})
}
);
} else {
local.assetsDict['/'] = local.assetsDict['/assets.index.template.html']
.replace((/\{\{env\.(\w+?)\}\}/g), function (match0, match1) {
// jslint-hack
String(match0);
switch (match1) {
case 'npm_package_description':
return 'the greatest app in the world!';
case 'npm_package_name':
return 'my-app';
case 'npm_package_nameAlias':
return 'my_app';
case 'npm_package_version':
return '0.0.1';
}
});
}
// run the cli
Eif (local.global.utility2_rollup || module !== require.main) {
break;
}
local.assetsDict['/assets.example.js'] =
local.assetsDict['/assets.example.js'] ||
local.fs.readFileSync(__filename, 'utf8');
// bug-workaround - long $npm_package_buildCustomOrg
/* jslint-ignore-begin */
local.assetsDict['/assets.npmtest_office_ui_fabric_react.rollup.js'] =
local.assetsDict['/assets.npmtest_office_ui_fabric_react.rollup.js'] ||
local.fs.readFileSync(
local.npmtest_office_ui_fabric_react.__dirname + '/lib.npmtest_office_ui_fabric_react.js',
'utf8'
).replace((/^#!/), '//');
/* jslint-ignore-end */
local.assetsDict['/favicon.ico'] = local.assetsDict['/favicon.ico'] || '';
// if $npm_config_timeout_exit exists,
// then exit this process after $npm_config_timeout_exit ms
if (Number(process.env.npm_config_timeout_exit)) {
setTimeout(process.exit, Number(process.env.npm_config_timeout_exit));
}
// start server
if (local.global.utility2_serverHttp1) {
break;
}
process.env.PORT = process.env.PORT || '8081';
console.error('server starting on port ' + process.env.PORT);
local.http.createServer(function (request, response) {
request.urlParsed = local.url.parse(request.url);
if (local.assetsDict[request.urlParsed.pathname] !== undefined) {
response.end(local.assetsDict[request.urlParsed.pathname]);
return;
}
response.statusCode = 404;
response.end();
}).listen(process.env.PORT);
break;
}
}());
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 2 2 2 2 2 2 1 2 2 2 2 1 1 1 1 | /* istanbul instrument in package npmtest_office_ui_fabric_react */
/*jslint
bitwise: true,
browser: true,
maxerr: 8,
maxlen: 96,
node: true,
nomen: true,
regexp: true,
stupid: true
*/
(function () {
'use strict';
var local;
// run shared js-env code - pre-init
(function () {
// init local
local = {};
// init modeJs
local.modeJs = (function () {
try {
return typeof navigator.userAgent === 'string' &&
typeof document.querySelector('body') === 'object' &&
typeof XMLHttpRequest.prototype.open === 'function' &&
'browser';
} catch (errorCaughtBrowser) {
return module.exports &&
typeof process.versions.node === 'string' &&
typeof require('http').createServer === 'function' &&
'node';
}
}());
// init global
local.global = local.modeJs === 'browser'
? window
: global;
// init utility2_rollup
local = local.global.utility2_rollup || local;
// init lib
local.local = local.npmtest_office_ui_fabric_react = local;
// init exports
if (local.modeJs === 'browser') {
local.global.utility2_npmtest_office_ui_fabric_react = local;
} else {
module.exports = local;
module.exports.__dirname = __dirname;
module.exports.module = module;
}
}());
}());
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | 2 2 2 2 2 2 2 1 2 2 1 1 1 1 2 2 2 2 1 1 2 2 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 1 2 2 1 2 2 1 2 2 1 1 1 1 1 | /* istanbul instrument in package npmtest_office_ui_fabric_react */
/*jslint
bitwise: true,
browser: true,
maxerr: 8,
maxlen: 96,
node: true,
nomen: true,
regexp: true,
stupid: true
*/
(function () {
'use strict';
var local;
// run shared js-env code - pre-init
(function () {
// init local
local = {};
// init modeJs
local.modeJs = (function () {
try {
return typeof navigator.userAgent === 'string' &&
typeof document.querySelector('body') === 'object' &&
typeof XMLHttpRequest.prototype.open === 'function' &&
'browser';
} catch (errorCaughtBrowser) {
return module.exports &&
typeof process.versions.node === 'string' &&
typeof require('http').createServer === 'function' &&
'node';
}
}());
// init global
local.global = local.modeJs === 'browser'
? window
: global;
switch (local.modeJs) {
// re-init local from window.local
case 'browser':
local = local.global.utility2.objectSetDefault(
local.global.utility2_rollup || local.global.local,
local.global.utility2
);
break;
// re-init local from example.js
case 'node':
local = (local.global.utility2_rollup || require('utility2'))
.requireReadme();
break;
}
// export local
local.global.local = local;
}());
// run shared js-env code - function
(function () {
return;
}());
switch (local.modeJs) {
// run browser js-env code - function
case 'browser':
break;
// run node js-env code - function
case 'node':
break;
}
// run shared js-env code - post-init
(function () {
return;
}());
switch (local.modeJs) {
// run browser js-env code - post-init
case 'browser':
local.testCase_browser_nullCase = local.testCase_browser_nullCase || function (
options,
onError
) {
/*
* this function will test browsers's null-case handling-behavior-behavior
*/
onError(null, options);
};
// run tests
local.nop(local.modeTest &&
document.querySelector('#testRunButton1') &&
document.querySelector('#testRunButton1').click());
break;
// run node js-env code - post-init
/* istanbul ignore next */
case 'node':
local.testCase_buildApidoc_default = local.testCase_buildApidoc_default || function (
options,
onError
) {
/*
* this function will test buildApidoc's default handling-behavior-behavior
*/
options = { modulePathList: module.paths };
local.buildApidoc(options, onError);
};
local.testCase_buildApp_default = local.testCase_buildApp_default || function (
options,
onError
) {
/*
* this function will test buildApp's default handling-behavior-behavior
*/
local.testCase_buildReadme_default(options, local.onErrorThrow);
local.testCase_buildLib_default(options, local.onErrorThrow);
local.testCase_buildTest_default(options, local.onErrorThrow);
local.testCase_buildCustomOrg_default(options, local.onErrorThrow);
options = [];
local.buildApp(options, onError);
};
local.testCase_buildCustomOrg_default = local.testCase_buildCustomOrg_default ||
function (options, onError) {
/*
* this function will test buildCustomOrg's default handling-behavior
*/
options = {};
local.buildCustomOrg(options, onError);
};
local.testCase_buildLib_default = local.testCase_buildLib_default || function (
options,
onError
) {
/*
* this function will test buildLib's default handling-behavior
*/
options = {};
local.buildLib(options, onError);
};
local.testCase_buildReadme_default = local.testCase_buildReadme_default || function (
options,
onError
) {
/*
* this function will test buildReadme's default handling-behavior-behavior
*/
options = {};
local.buildReadme(options, onError);
};
local.testCase_buildTest_default = local.testCase_buildTest_default || function (
options,
onError
) {
/*
* this function will test buildTest's default handling-behavior
*/
options = {};
local.buildTest(options, onError);
};
local.testCase_webpage_default = local.testCase_webpage_default || function (
options,
onError
) {
/*
* this function will test webpage's default handling-behavior
*/
options = { modeCoverageMerge: true, url: local.serverLocalHost + '?modeTest=1' };
local.browserTest(options, onError);
};
// run test-server
local.testRunServer(local);
break;
}
}());
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Breadcrumb.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Button.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Calendar.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Callout.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Check.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Checkbox.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| ChoiceGroup.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Color.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| ColorPicker.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| CommandBar.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| ContextualMenu.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| DatePicker.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| DetailsList.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Dialog.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) | |
| DocumentCard.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Dropdown.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Fabric.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Facepile.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| FocusTrapZone.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| FocusZone.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| GroupedList.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Icon.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Image.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Label.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Layer.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Link.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| List.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| MarqueeSelection.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) | |
| MessageBar.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Modal.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) | |
| Nav.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Overlay.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Panel.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Persona.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Pickers.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Pivot.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Popup.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| ProgressIndicator.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Rating.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| SearchBox.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Selection.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Slider.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Spinner.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| TeachingBubble.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| TextField.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Toggle.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Tooltip.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| Utilities.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| VisualTestRoot.js | 16.67% | (8 / 48) | 0% | (0 / 14) | 0% | (0 / 12) | 17.39% | (8 / 46) | |
| VisualTestState.js | 33.33% | (1 / 3) | 100% | (0 / 0) | 0% | (0 / 1) | 33.33% | (1 / 3) | |
| index.js | 4.08% | (2 / 49) | 0% | (0 / 2) | 0% | (0 / 2) | 4.26% | (2 / 47) |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Breadcrumb/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Breadcrumb.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Button/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Button.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Calendar/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Calendar.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Callout/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Callout.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Check/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Check.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Checkbox/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Checkbox.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/ChoiceGroup/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=ChoiceGroup.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./utilities/color/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Color.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/ColorPicker/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=ColorPicker.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/CommandBar/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=CommandBar.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/ContextualMenu/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=ContextualMenu.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/DatePicker/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=DatePicker.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/DetailsList/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=DetailsList.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./components/Dialog/index", "./components/Dialog/index"], function (require, exports, index_1, index_2) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); exports.default = index_2.Dialog; }); //# sourceMappingURL=Dialog.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/DocumentCard/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=DocumentCard.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Dropdown/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Dropdown.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Fabric/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Fabric.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Facepile/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Facepile.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/FocusTrapZone/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=FocusTrapZone.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/FocusZone/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=FocusZone.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/GroupedList/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=GroupedList.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Icon/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Icon.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Image/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Image.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Label/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Label.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Layer/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Layer.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Link/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Link.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/List/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=List.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./components/MarqueeSelection/MarqueeSelection", "./utilities/selection/index"], function (require, exports, MarqueeSelection_1, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(MarqueeSelection_1); __export(index_1); }); //# sourceMappingURL=MarqueeSelection.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/MessageBar/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=MessageBar.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./components/Modal/index", "./components/Modal/index"], function (require, exports, index_1, index_2) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); exports.default = index_2.Modal; }); //# sourceMappingURL=Modal.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Nav/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Nav.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Overlay/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Overlay.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Panel/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Panel.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Persona/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Persona.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/pickers/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Pickers.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Pivot/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Pivot.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Popup/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Popup.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/ProgressIndicator/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=ProgressIndicator.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Rating/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Rating.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/SearchBox/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=SearchBox.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./utilities/selection/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Selection.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Slider/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Slider.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Spinner/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Spinner.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/TeachingBubble/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=TeachingBubble.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/TextField/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=TextField.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Toggle/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Toggle.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./components/Tooltip/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Tooltip.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "@uifabric/utilities/lib/index"], function (require, exports, index_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); }); //# sourceMappingURL=Utilities.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 2 1 1 1 1 1 1 1 | define(["require", "exports", "react", "react-dom", "./VisualTestState", "./utilities/router/index", "./Utilities"], function (require, exports, React, ReactDOM, VisualTestState_1, index_1, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Utilities_1.setBaseUrl('./dist/'); var rootElement; var currentBreakpoint; var scrollDistance; var requireContext = require.context('./components', true, /Page.visualtest$/); // This is mostly taken from the react-website project. function _routerDidMount() { if (_hasAnchorLink(window.location.hash)) { var hash = _extractAnchorLink(window.location.hash); var el = document.getElementById(hash); var elRect = el.getBoundingClientRect(); var bodySTop = document.body.scrollTop; var currentScrollPosition = void 0; currentScrollPosition = bodySTop + elRect.top; document.body.scrollTop = currentScrollPosition - scrollDistance; } } function _hasAnchorLink(path) { return (path.match(/#/g) || []).length > 1; } function _extractAnchorLink(path) { var split = path.split('#'); var cleanedSplit = split.filter(function (value) { if (value === '') { return false; } else { return true; } }); return cleanedSplit[cleanedSplit.length - 1]; } function _onLoad() { // Load the app into this element. rootElement = rootElement || document.getElementById('content'); ReactDOM.render(React.createElement("div", { style: { display: 'inline-block' } }, React.createElement(index_1.Router, { onNewRouteLoaded: _routerDidMount }, _getAppRoutes())), rootElement); } function _getAppRoutes() { var routes = []; // Create a route for each top level page, and all of its sub pages VisualTestState_1.VisualTestState.componentPath.forEach(function (path, pathIndex) { var componentNameIndex = path.lastIndexOf('/'); var name = path.substr(componentNameIndex + 1); var url = name.substr(0, name.lastIndexOf('Page.visualtest')); routes.push(React.createElement(index_1.Route, { key: pathIndex, path: '#/' + url, getComponent: getPath(path) })); }); return routes; } function getPath(path) { return (function (cb) { return require.ensure([], function () { return cb(requireContext(path).default); }); }); } function _onUnload() { if (rootElement) { ReactDOM.unmountComponentAtNode(rootElement); } } var isReady = document.readyState === 'interactive' || document.readyState === 'complete'; if (isReady) { _onLoad(); } else { window.onload = _onLoad; } window.onunload = _onUnload; }); //# sourceMappingURL=VisualTestRoot.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.VisualTestState = { componentPath: [ './Button/CommandButtonPage.visualtest', './Button/CompoundButtonPage.visualtest', './Button/ContextualButtonPage.visualtest', './Button/DefaultButtonPage.visualtest', './Button/PrimaryButtonPage.visualtest', './Checkbox/CheckboxPage.visualtest', './ChoiceGroup/ChoiceGroupPage.visualtest', './ContextualMenu/ContextualMenuPage.visualtest' ] }; }); //# sourceMappingURL=VisualTestState.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 1 | /** * WARNING: This entry should NOT be imported for production purposes. This entry forces every control to be * parsed and available at load time, which is not necessary for most cases. */ define(["require", "exports", "./Breadcrumb", "./Button", "./Calendar", "./Callout", "./Checkbox", "./ChoiceGroup", "./ColorPicker", "./CommandBar", "./ContextualMenu", "./DatePicker", "./DetailsList", "./Dialog", "./DocumentCard", "./Dropdown", "./Fabric", "./Facepile", "./FocusTrapZone", "./FocusZone", "./GroupedList", "./Icon", "./Image", "./Label", "./Layer", "./Link", "./List", "./MessageBar", "./MarqueeSelection", "./Nav", "./Overlay", "./Panel", "./Pickers", "./Persona", "./Pivot", "./ProgressIndicator", "./Rating", "./SearchBox", "./Slider", "./Spinner", "./TeachingBubble", "./TextField", "./Toggle", "./Tooltip", "./Utilities"], function (require, exports, Breadcrumb_1, Button_1, Calendar_1, Callout_1, Checkbox_1, ChoiceGroup_1, ColorPicker_1, CommandBar_1, ContextualMenu_1, DatePicker_1, DetailsList_1, Dialog_1, DocumentCard_1, Dropdown_1, Fabric_1, Facepile_1, FocusTrapZone_1, FocusZone_1, GroupedList_1, Icon_1, Image_1, Label_1, Layer_1, Link_1, List_1, MessageBar_1, MarqueeSelection_1, Nav_1, Overlay_1, Panel_1, Pickers_1, Persona_1, Pivot_1, ProgressIndicator_1, Rating_1, SearchBox_1, Slider_1, Spinner_1, TeachingBubble_1, TextField_1, Toggle_1, Tooltip_1, Utilities_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Breadcrumb_1); __export(Button_1); __export(Calendar_1); __export(Callout_1); __export(Checkbox_1); __export(ChoiceGroup_1); __export(ColorPicker_1); __export(CommandBar_1); __export(ContextualMenu_1); __export(DatePicker_1); __export(DetailsList_1); __export(Dialog_1); __export(DocumentCard_1); __export(Dropdown_1); __export(Fabric_1); __export(Facepile_1); __export(FocusTrapZone_1); __export(FocusZone_1); __export(GroupedList_1); __export(Icon_1); __export(Image_1); __export(Label_1); __export(Layer_1); __export(Link_1); __export(List_1); __export(MessageBar_1); __export(MarqueeSelection_1); __export(Nav_1); __export(Overlay_1); __export(Panel_1); __export(Pickers_1); __export(Persona_1); __export(Pivot_1); __export(ProgressIndicator_1); __export(Rating_1); __export(SearchBox_1); __export(Slider_1); __export(Spinner_1); __export(TeachingBubble_1); __export(TextField_1); __export(Toggle_1); __export(Tooltip_1); __export(Utilities_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BaseStore.js | 11.11% | (2 / 18) | 0% | (0 / 2) | 0% | (0 / 6) | 11.76% | (2 / 17) | |
| ConnectedHost.js | 9.2% | (8 / 87) | 15.87% | (10 / 63) | 4.55% | (1 / 22) | 10.13% | (8 / 79) | |
| DirectionalHint.js | 5.56% | (1 / 18) | 0% | (0 / 2) | 0% | (0 / 2) | 5.56% | (1 / 18) | |
| IAccessiblePopupProps.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| ISubscribable.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| StoreHost.js | 22.22% | (6 / 27) | 25% | (4 / 16) | 10% | (1 / 10) | 25% | (6 / 24) | |
| StoreSet.js | 12.5% | (2 / 16) | 100% | (0 / 0) | 0% | (0 / 6) | 12.5% | (2 / 16) | |
| VisualTest.js | 33.33% | (1 / 3) | 100% | (0 / 0) | 0% | (0 / 1) | 33.33% | (1 / 3) | |
| connect.js | 33.33% | (2 / 6) | 100% | (0 / 0) | 0% | (0 / 3) | 40% | (2 / 5) | |
| storeKey.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 2) | 33.33% | (1 / 3) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 2 1 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _instanceId = 0; var BaseStore = (function () { function BaseStore() { this._callbacks = {}; } BaseStore.prototype.subscribe = function (onChange) { var _this = this; var id = _instanceId++; this._callbacks[id] = onChange; return { dispose: function () { return delete _this._callbacks[id]; } }; }; BaseStore.prototype.emitChange = function () { for (var id in this._callbacks) { if (this._callbacks.hasOwnProperty(id)) { this._callbacks[id](); } } }; return BaseStore; }()); exports.BaseStore = BaseStore; }); //# sourceMappingURL=BaseStore.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Track all components that require changes.
var _changedComponents;
var ConnectedHost = (function (_super) {
__extends(ConnectedHost, _super);
function ConnectedHost(props) {
var _this = _super.call(this, props) || this;
_this.state = {
props: null
};
return _this;
}
ConnectedHost.prototype.componentWillMount = function () {
var _this = this;
if (this.props.storesToSubscribe && this.props.storesToSubscribe.length > 0) {
if (!this.context.stores) {
throw "A connected component was hosted in an environment where no stores were hosted. Use the StoreHost to host components.";
}
// Resolve and subscribe to stores.
this._stores = this.props.storesToSubscribe.map(function (storeKey) {
var store = _this.context.stores.getStore(storeKey);
if (!store) {
throw "The \"" + storeKey.name + "\" store was required by a connected component, but not exposed.";
}
_this._disposables.push(store.subscribe(_this._onStoreChanged));
return store;
});
}
// We can only initialize state at this point, where context has been resolved.
this.state = {
props: this._getComponentProps(this.props)
};
};
ConnectedHost.prototype.componentDidMount = function () {
this._isMounted = true;
};
ConnectedHost.prototype.componentWillUnmount = function () {
this._isMounted = false;
};
ConnectedHost.prototype.componentWillReceiveProps = function (newProps) {
this._updateProps(newProps);
};
ConnectedHost.prototype.shouldComponentUpdate = function (newProps, newState) {
var inputPropsHaveChanged = !Utilities_1.shallowCompare(this.props.componentProps, newProps.componentProps);
var computedPropsHaveChanged = !Utilities_1.shallowCompare(this.state.props, newState.props);
var shouldUpdate = inputPropsHaveChanged || computedPropsHaveChanged;
return shouldUpdate;
};
ConnectedHost.prototype.render = function () {
var Component = this.props.component;
var props = this.state.props;
return props ? React.createElement(Component, __assign({}, props)) : null;
};
ConnectedHost.prototype._onStoreChanged = function () {
var storesToSubscribe = this.props.storesToSubscribe;
if (!storesToSubscribe || storesToSubscribe.length < 2) {
this._updateProps();
}
else if (!this._changeEnqueued) {
if (!_changedComponents) {
_changedComponents = [];
this._async.setImmediate(function () {
_changedComponents.forEach(function (comp) { return comp._updateProps(); });
_changedComponents = null;
});
}
_changedComponents.push(this);
this._changeEnqueued = true;
}
};
ConnectedHost.prototype._updateProps = function (props) {
this._changeEnqueued = false;
props = this._getComponentProps(props || this.props);
this.setState({ props: props });
};
ConnectedHost.prototype._getComponentProps = function (props) {
var newProps = Utilities_1.assign({}, props.componentProps, props.getProps.apply(props, [props.componentProps].concat(this._stores)));
return newProps;
};
return ConnectedHost;
}(Utilities_1.BaseComponent));
ConnectedHost.contextTypes = {
stores: React.PropTypes.object
};
__decorate([
Utilities_1.autobind
], ConnectedHost.prototype, "_onStoreChanged", null);
__decorate([
Utilities_1.autobind
], ConnectedHost.prototype, "_updateProps", null);
exports.ConnectedHost = ConnectedHost;
});
//# sourceMappingURL=ConnectedHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DirectionalHint; (function (DirectionalHint) { /** * Appear above the target element, with the left edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["topLeftEdge"] = 0] = "topLeftEdge"; /** * Appear above the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["topCenter"] = 1] = "topCenter"; /** * Appear above the target element, with the right edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["topRightEdge"] = 2] = "topRightEdge"; /** * Appear above the target element, aligning with the target element such that the callout tends toward the center of the screen. */ DirectionalHint[DirectionalHint["topAutoEdge"] = 3] = "topAutoEdge"; /** * Appear below the target element, with the left edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["bottomLeftEdge"] = 4] = "bottomLeftEdge"; /** * Appear below the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["bottomCenter"] = 5] = "bottomCenter"; /** * Appear below the target element, with the right edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["bottomRightEdge"] = 6] = "bottomRightEdge"; /** * Appear below the target element, aligning with the target element such that the callout tends toward the center of the screen. */ DirectionalHint[DirectionalHint["bottomAutoEdge"] = 7] = "bottomAutoEdge"; /** * Appear to the left of the target element, with the top edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["leftTopEdge"] = 8] = "leftTopEdge"; /** * Appear to the left of the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["leftCenter"] = 9] = "leftCenter"; /** * Appear to the left of the target element, with the bottom edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["leftBottomEdge"] = 10] = "leftBottomEdge"; /** * Appear to the right of the target element, with the top edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["rightTopEdge"] = 11] = "rightTopEdge"; /** * Appear to the right of the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["rightCenter"] = 12] = "rightCenter"; /** * Appear to the right of the target element, with the bottom edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["rightBottomEdge"] = 13] = "rightBottomEdge"; })(DirectionalHint = exports.DirectionalHint || (exports.DirectionalHint = {})); }); //# sourceMappingURL=DirectionalHint.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=IAccessiblePopupProps.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=ISubscribable.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var StoreHost = (function (_super) {
__extends(StoreHost, _super);
function StoreHost() {
return _super !== null && _super.apply(this, arguments) || this;
}
StoreHost.prototype.getChildContext = function () {
var parentStores = this.context.stores;
var currentStores = this.props.stores;
return { stores: parentStores ? parentStores.merge(currentStores) : currentStores };
};
StoreHost.prototype.render = function () {
return React.Children.only(this.props.children);
};
return StoreHost;
}(Utilities_1.BaseComponent));
StoreHost.contextTypes = {
stores: React.PropTypes.object
};
StoreHost.childContextTypes = {
stores: React.PropTypes.object
};
exports.StoreHost = StoreHost;
});
//# sourceMappingURL=StoreHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 1 | define(["require", "exports", "../Utilities"], function (require, exports, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var StoreSet = (function () { function StoreSet() { this._stores = {}; } StoreSet.prototype.add = function (key, value) { this._stores[key.id] = value; return this; }; StoreSet.prototype.getStore = function (key) { return this._stores[key.id]; }; StoreSet.prototype.merge = function (stores) { var mergedStoreSet = new StoreSet(); mergedStoreSet._stores = Utilities_1.assign({}, this._stores, stores); return mergedStoreSet; }; return StoreSet; }()); exports.StoreSet = StoreSet; }); //# sourceMappingURL=StoreSet.js.map |
| 1 2 3 4 5 6 7 8 9 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.baseUrl = 'http://localhost:43210/visualtest.html?#/'; }); //# sourceMappingURL=VisualTest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "react", "./ConnectedHost"], function (require, exports, React, ConnectedHost_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function connect(component, storesToSubscribe, getProps) { return function (props) { return (React.createElement(ConnectedHost_1.ConnectedHost, { component: component, componentProps: props, getProps: getProps, storesToSubscribe: storesToSubscribe })); }; } exports.connect = connect; }); //# sourceMappingURL=connect.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 2 | define(["require", "exports", "../Utilities"], function (require, exports, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Store keys are a very simple abstraction that maps a string name to an interface type. * The enables a type-safe contract for store dependencies when you connect dumb components * to stores. * * @example * let selectionKey = storeKey<ISelection>('selection'); * * let stores = new StoreSet() * .add(selectionKey, new Selection()); * * <StoreHost stores={ stores }> * ... * </StoreHost> * * connect(DumbComponent, [ selectionKey ], (props, selection) => ({ * isSelected: selection.getSelected(props.item.key) * }); * * Note that the "selection" reference in the connect callback would be of type ISelection due * to the selectionKey reference, and you will get TypeScript errors by referring to selection * member that aren't in that interface. */ exports.storeKey = function (name) { return ({ name: name, id: Utilities_1.getId(name) }); }; }); //# sourceMappingURL=storeKey.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Breadcrumb.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Breadcrumb.js | 6.86% | (7 / 102) | 9.86% | (7 / 71) | 4.35% | (1 / 23) | 7.29% | (7 / 96) | |
| Breadcrumb.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| BreadcrumbPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Breadcrumb.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../ContextualMenu", "../../Link", "../../common/DirectionalHint", "./Breadcrumb.scss"], function (require, exports, React, Utilities_1, FocusZone_1, ContextualMenu_1, Link_1, DirectionalHint_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var OVERFLOW_KEY = 'overflow';
var OVERFLOW_WIDTH = 44;
var Breadcrumb = (function (_super) {
__extends(Breadcrumb, _super);
function Breadcrumb(props) {
var _this = _super.call(this, props) || this;
_this._id = Utilities_1.getId('Breadcrumb');
_this.state = _this._getStateFromProps(props);
return _this;
}
Breadcrumb.prototype.componentDidMount = function () {
this._updateItemMeasurements();
this._updateRenderedItems();
this._events.on(window, 'resize', this._updateRenderedItems);
};
Breadcrumb.prototype.componentWillReceiveProps = function (nextProps) {
this.setState(this._getStateFromProps(nextProps));
this._breadcrumbItemWidths = null;
};
Breadcrumb.prototype.componentDidUpdate = function (prevProps, prevStates) {
if (!this._breadcrumbItemWidths) {
this._updateItemMeasurements();
this._updateRenderedItems();
}
};
Breadcrumb.prototype.render = function () {
var _this = this;
var className = this.props.className;
var _a = this.state, isOverflowOpen = _a.isOverflowOpen, overflowAnchor = _a.overflowAnchor, renderedItems = _a.renderedItems, renderedOverflowItems = _a.renderedOverflowItems;
var overflowMenuId = this._id + '-overflow';
var _b = this.props.onRenderItem, onRenderItem = _b === void 0 ? this._onRenderItem : _b;
return (React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb', className, styles.root), ref: 'renderingArea' },
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement("ul", { className: Utilities_1.css('ms-Breadcrumb-list', styles.list) },
renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-overflow', styles.overflow), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More', styles.overflowButton), onClick: this._onOverflowClicked, "data-is-focusable": true, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null }),
React.createElement("i", { className: Utilities_1.css('ms-Breadcrumb-chevron ms-Icon', styles.chevron, Utilities_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }))) : (null),
renderedItems.map(function (item, index) { return (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-listItem', styles.listItem), key: item.key || String(index), ref: item.key || String(index) },
onRenderItem(item, _this._defaultRenderItem),
React.createElement("i", { className: Utilities_1.css('ms-Breadcrumb-chevron ms-Icon', styles.chevron, Utilities_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }))); }))),
isOverflowOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, { targetElement: overflowAnchor, isBeakVisible: true, items: renderedOverflowItems.map(function (item, index) { return ({
name: item.text,
key: item.key,
onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,
href: item.href
}); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed })) : (null)));
};
Breadcrumb.prototype._onRenderItem = function (item, defaultRender) {
return this._defaultRenderItem(item);
};
Breadcrumb.prototype._defaultRenderItem = function (item) {
if (item.onClick || item.href) {
return (React.createElement(Link_1.Link, { className: Utilities_1.css('ms-Breadcrumb-itemLink', styles.itemLink), href: item.href, onClick: this._onBreadcrumbClicked.bind(this, item) }, item.text));
}
else {
return (React.createElement("span", { className: Utilities_1.css('ms-Breadcrumb-item', styles.item) }, item.text));
}
};
Breadcrumb.prototype._onOverflowClicked = function (ev) {
this.setState({
'isOverflowOpen': !this.state.isOverflowOpen,
'overflowAnchor': ev.currentTarget
});
};
Breadcrumb.prototype._onOverflowDismissed = function (ev) {
this.setState({
'isOverflowOpen': false,
'overflowAnchor': null
});
};
Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
if (item.onClick) {
item.onClick(ev, item);
}
this.setState({
'isOverflowOpen': false
});
};
Breadcrumb.prototype._updateItemMeasurements = function () {
var items = this.props.items;
if (!this._breadcrumbItemWidths) {
this._breadcrumbItemWidths = {};
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!this._breadcrumbItemWidths[item.key]) {
var el = this.refs[item.key];
this._breadcrumbItemWidths[item.key] = el.getBoundingClientRect().width;
}
}
};
Breadcrumb.prototype._updateRenderedItems = function () {
var _a = this.props, items = _a.items, maxDisplayedItems = _a.maxDisplayedItems;
var renderingArea = this.refs.renderingArea;
var renderedItems = [];
var renderedOverflowItems = [].concat(items);
var consumedWidth = 0;
var style = window.getComputedStyle(renderingArea);
var availableWidth = renderingArea.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
availableWidth -= OVERFLOW_WIDTH;
var i;
var minIndex = Math.max(0, renderedOverflowItems.length - maxDisplayedItems);
for (i = renderedOverflowItems.length - 1; i >= minIndex; i--) {
var item = renderedOverflowItems[i];
var itemWidth = this._breadcrumbItemWidths[item.key];
if ((consumedWidth + itemWidth) >= availableWidth) {
break;
}
else {
consumedWidth += itemWidth;
}
}
renderedItems = renderedOverflowItems.splice(i + 1);
this.setState({
isOverflowOpen: this.state.isOverflowOpen,
overflowAnchor: this.state.overflowAnchor,
renderedItems: renderedItems,
renderedOverflowItems: renderedOverflowItems,
});
};
Breadcrumb.prototype._getStateFromProps = function (nextProps) {
return {
isOverflowOpen: false,
overflowAnchor: null,
renderedItems: nextProps.items || [],
renderedOverflowItems: null
};
};
return Breadcrumb;
}(Utilities_1.BaseComponent));
Breadcrumb.defaultProps = {
items: [],
maxDisplayedItems: 999
};
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onRenderItem", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_defaultRenderItem", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onOverflowClicked", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onOverflowDismissed", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
exports.Breadcrumb = Breadcrumb;
});
//# sourceMappingURL=Breadcrumb.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_0a65bb7e', list: 'list_0a65bb7e', chevron: 'chevron_0a65bb7e', listItem: 'listItem_0a65bb7e', item: 'item_0a65bb7e', itemLink: 'itemLink_0a65bb7e', overflow: 'overflow_0a65bb7e', overflowButton: 'overflowButton_0a65bb7e', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_0a65bb7e{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.list_0a65bb7e{white-space:nowrap;padding:0;margin:0}.chevron_0a65bb7e{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";vertical-align:top;margin:11px 0;line-height:1}.listItem_0a65bb7e{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block;position:relative}.listItem_0a65bb7e:last-of-type .chevron_0a65bb7e{display:none}.listItem_0a65bb7e .itemLink_0a65bb7e,.listItem_0a65bb7e .item_0a65bb7e{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;padding:0 8px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}.overflow_0a65bb7e{display:inline-block;position:relative}.overflowButton_0a65bb7e{font-size:16px;display:inline-block;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";padding:9px 8px;cursor:pointer;vertical-align:top;line-height:1}.overflowButton_0a65bb7e:hover{cursor:pointer;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_0a65bb7e:hover{cursor:default}.root_0a65bb7e .itemLink_0a65bb7e:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:initial;cursor:pointer}.root_0a65bb7e .itemLink_0a65bb7e:focus{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_0a65bb7e .itemLink_0a65bb7e:active{outline:transparent;background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemLink_0a65bb7e,.overflowButton_0a65bb7e{text-decoration:none;outline:transparent}@media screen and (max-width:639px){.listItem_0a65bb7e .itemLink_0a65bb7e{font-size:17px}.chevron_0a65bb7e{font-size:10px;margin:8px 0}.overflowButton_0a65bb7e{font-size:15px;padding:6px 8px;line-height:1}}@media screen and (max-width:479px){.listItem_0a65bb7e .itemLink_0a65bb7e{font-size:14px;max-width:116px}.chevron_0a65bb7e{font-size:8px;margin:7px 0}.overflowButton_0a65bb7e{padding:4px 6px}}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Breadcrumb.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Breadcrumb.Basic.Example"], function (require, exports, React, example_app_base_1, Breadcrumb_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BreadcrumbBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx');
var BreadcrumbPage = (function (_super) {
__extends(BreadcrumbPage, _super);
function BreadcrumbPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
BreadcrumbPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Breadcrumb', componentName: 'BreadcrumbExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Simple breadcrumb', code: BreadcrumbBasicExampleCode },
React.createElement(Breadcrumb_Basic_Example_1.BreadcrumbBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy."),
React.createElement("p", null, "Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Breadcrumb/Breadcrumb.html' }, "Fabric JS"), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use Breadcrumbs as a primary way to navigate an app or site."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return BreadcrumbPage;
}(React.Component));
exports.BreadcrumbPage = BreadcrumbPage;
});
//# sourceMappingURL=BreadcrumbPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Breadcrumb"], function (require, exports, Breadcrumb_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Breadcrumb_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BaseButton.js | 7.41% | (8 / 108) | 9.52% | (10 / 105) | 4.76% | (1 / 21) | 7.92% | (8 / 101) | |
| BaseButton.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| Button.Props.js | 6.67% | (1 / 15) | 0% | (0 / 4) | 0% | (0 / 3) | 6.67% | (1 / 15) | |
| Button.js | 18.92% | (7 / 37) | 29.17% | (7 / 24) | 10% | (1 / 10) | 21.21% | (7 / 33) | |
| ButtonPage.js | 18.18% | (6 / 33) | 30.77% | (4 / 13) | 10% | (1 / 10) | 20% | (6 / 30) | |
| CommandButton.visualtest.js | 6.67% | (1 / 15) | 100% | (0 / 0) | 0% | (0 / 8) | 7.14% | (1 / 14) | |
| CommandButtonPage.visualtest.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| CompoundButton.visualtest.js | 6.67% | (1 / 15) | 100% | (0 / 0) | 0% | (0 / 8) | 7.14% | (1 / 14) | |
| CompoundButtonPage.visualtest.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| ContextualButton.visualtest.js | 5.88% | (1 / 17) | 100% | (0 / 0) | 0% | (0 / 8) | 6.25% | (1 / 16) | |
| ContextualButtonPage.visualtest.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| DefaultButton.visualtest.js | 6.25% | (1 / 16) | 100% | (0 / 0) | 0% | (0 / 9) | 6.67% | (1 / 15) | |
| DefaultButtonPage.visualtest.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| PrimaryButton.visualtest.js | 6.67% | (1 / 15) | 100% | (0 / 0) | 0% | (0 / 8) | 7.14% | (1 / 14) | |
| PrimaryButtonPage.visualtest.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| index.js | 14.29% | (2 / 14) | 0% | (0 / 2) | 0% | (0 / 2) | 16.67% | (2 / 12) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Icon", "../../common/DirectionalHint", "../../ContextualMenu", "./BaseButton.scss"], function (require, exports, React, Utilities_1, Icon_1, DirectionalHint_1, ContextualMenu_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BaseButton = (function (_super) {
__extends(BaseButton, _super);
function BaseButton(props, rootClassName) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
rootProps: null,
icon: 'iconProps',
menuIconName: 'menuIconProps'
});
_this._labelId = Utilities_1.getId();
_this._descriptionId = Utilities_1.getId();
_this._ariaDescriptionId = Utilities_1.getId();
_this.state = {
menuProps: null
};
return _this;
}
BaseButton.prototype.render = function () {
var _a = this.props, description = _a.description, ariaLabel = _a.ariaLabel, ariaDescription = _a.ariaDescription, href = _a.href, disabled = _a.disabled, classNames = _a.classNames;
var _b = this, _ariaDescriptionId = _b._ariaDescriptionId, _labelId = _b._labelId, _descriptionId = _b._descriptionId;
var renderAsAnchor = !!href;
var tag = renderAsAnchor ? 'a' : 'button';
var nativeProps = Utilities_1.getNativeProps(Utilities_1.assign({}, this.props.rootProps, this.props), renderAsAnchor ? Utilities_1.anchorProperties : Utilities_1.buttonProperties, [
'disabled' // Let disabled buttons be focused and styled as disabled.
]);
// Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby
// otherwise default to null.
var ariaDescribedBy;
if (ariaDescription) {
ariaDescribedBy = _ariaDescriptionId;
}
else if (description) {
ariaDescribedBy = _descriptionId;
}
else if (nativeProps['aria-describedby']) {
ariaDescribedBy = nativeProps['aria-describedby'];
}
else {
ariaDescribedBy = null;
}
var buttonProps = Utilities_1.assign(nativeProps, {
className: Utilities_1.css(styles.root, this.props.className, classNames.base, classNames.variant, classNames.root, (_c = {
'disabled': disabled
},
_c[classNames.isDisabled] = disabled,
_c[classNames.isEnabled] = !disabled,
_c)),
ref: this._resolveRef('_buttonElement'),
'disabled': disabled,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabel ? null : _labelId,
'aria-describedby': ariaDescribedBy,
'aria-disabled': disabled
});
// Override onClick if contextualMenuItems passed in. Eventually allow _onToggleMenu to
// be assigned to split button click if onClick already has a value
if (this.props.menuProps) {
Utilities_1.assign(buttonProps, { 'onClick': this._onToggleMenu });
}
return this._onRenderContent(tag, buttonProps);
var _c;
};
BaseButton.prototype.focus = function () {
if (this._buttonElement) {
this._buttonElement.focus();
}
};
BaseButton.prototype._onRenderContent = function (tag, buttonProps) {
var props = this.props;
var classNames = props.classNames, menuIconName = props.menuIconName, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderText, onRenderText = _b === void 0 ? this._onRenderText : _b, _c = props.onRenderDescription, onRenderDescription = _c === void 0 ? this._onRenderDescription : _c, _d = props.onRenderAriaDescription, onRenderAriaDescription = _d === void 0 ? this._onRenderAriaDescription : _d, _e = props.onRenderChildren, onRenderChildren = _e === void 0 ? this._onRenderChildren : _e, _f = props.onRenderMenu, onRenderMenu = _f === void 0 ? this._onRenderMenu : _f, _g = props.onRenderMenuIcon, onRenderMenuIcon = _g === void 0 ? this._onRenderMenuIcon : _g;
var className = Utilities_1.css(classNames.base + '-flexContainer', styles.flexContainer, classNames.flexContainer);
return React.createElement(tag, buttonProps, React.createElement('div', { className: className }, onRenderIcon(props, this._onRenderIcon), onRenderText(props, this._onRenderText), onRenderDescription(props, this._onRenderDescription), onRenderAriaDescription(props, this._onRenderAriaDescription), onRenderChildren(props, this._onRenderChildren), (menuProps || menuIconName || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon), this.state.menuProps && onRenderMenu(menuProps, this._onRenderMenu)));
};
BaseButton.prototype._onRenderIcon = function (buttonProps, defaultRender) {
var _a = this.props, classNames = _a.classNames, icon = _a.icon, iconProps = _a.iconProps;
if (icon || iconProps) {
iconProps = iconProps || {
iconName: icon
};
}
return iconProps && (React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: Utilities_1.css(classNames.base + "-icon", classNames.icon, iconProps.className) })));
};
BaseButton.prototype._onRenderText = function () {
var _a = this.props, classNames = _a.classNames, children = _a.children, text = _a.text;
// For backwards compat, we should continue to take in the text content from children.
if (text === undefined && typeof (children) === 'string') {
text = children;
}
return text && (React.createElement("span", { className: Utilities_1.css(classNames.base + "-label", classNames.label), id: this._labelId }, text));
};
BaseButton.prototype._onRenderChildren = function () {
var children = this.props.children;
// If children is just a string, either it or the text will be rendered via onRenderLabel
// If children is another component, it will be rendered after text
if (typeof (children) === 'string') {
return null;
}
return children;
};
BaseButton.prototype._onRenderDescription = function () {
var _a = this.props, classNames = _a.classNames, description = _a.description;
// ms-Button-description is only shown when the button type is compound.
// In other cases it will not be displayed.
return description ? (React.createElement("span", { className: Utilities_1.css(classNames.base + "-description", classNames.description), id: this._descriptionId }, description)) : (null);
};
BaseButton.prototype._onRenderAriaDescription = function () {
var ariaDescription = this.props.ariaDescription;
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
// otherwise it will be assigned to descriptionSpan.
return ariaDescription ? (React.createElement("span", { className: styles.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)) : (null);
};
BaseButton.prototype._onRenderMenuIcon = function (props) {
var _a = this.props, classNames = _a.classNames, menuIconProps = _a.menuIconProps, menuIconName = _a.menuIconName;
if (menuIconProps === undefined) {
menuIconProps = {
iconName: menuIconName === undefined ? 'ChevronDown' : menuIconName
};
}
return (menuIconProps ?
React.createElement(Icon_1.Icon, __assign({}, menuIconProps, { className: Utilities_1.css(classNames.base + "-icon", classNames.menuIcon, menuIconProps.className) }))
:
null);
};
BaseButton.prototype._onRenderMenu = function (menuProps) {
return (React.createElement(ContextualMenu_1.ContextualMenu, { className: Utilities_1.css('ms-BaseButton-menuHost'), isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, items: menuProps.items, target: this._buttonElement, labelElementId: this._labelId, onDismiss: this._onToggleMenu }));
};
BaseButton.prototype._onToggleMenu = function () {
var menuProps = this.props.menuProps;
var currentMenuProps = this.state.menuProps;
this.setState({ menuProps: currentMenuProps ? null : menuProps });
};
return BaseButton;
}(Utilities_1.BaseComponent));
BaseButton.defaultProps = {
classNames: {
base: 'ms-Button',
variant: '',
isEnabled: '',
isDisabled: ''
}
};
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderIcon", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderText", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderChildren", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderDescription", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderAriaDescription", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderMenuIcon", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderMenu", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onToggleMenu", null);
exports.BaseButton = BaseButton;
});
//# sourceMappingURL=BaseButton.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { flexContainer: 'flexContainer_a920f7da', root: 'root_a920f7da', screenReaderOnly: 'screenReaderOnly_a920f7da', }; load_themed_styles_1.loadStyles([{ "rawString": ".flexContainer_a920f7da{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.root_a920f7da{outline:transparent}.screenReaderOnly_a920f7da{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=BaseButton.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var ElementType; (function (ElementType) { /** <button> element. */ ElementType[ElementType["button"] = 0] = "button"; /** <a> element. */ ElementType[ElementType["anchor"] = 1] = "anchor"; })(ElementType = exports.ElementType || (exports.ElementType = {})); var ButtonType; (function (ButtonType) { ButtonType[ButtonType["normal"] = 0] = "normal"; ButtonType[ButtonType["primary"] = 1] = "primary"; ButtonType[ButtonType["hero"] = 2] = "hero"; ButtonType[ButtonType["compound"] = 3] = "compound"; ButtonType[ButtonType["command"] = 4] = "command"; ButtonType[ButtonType["icon"] = 5] = "icon"; ButtonType[ButtonType["default"] = 6] = "default"; })(ButtonType = exports.ButtonType || (exports.ButtonType = {})); }); //# sourceMappingURL=Button.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./Button.Props", "./DefaultButton/DefaultButton", "./CommandButton/CommandButton", "./CompoundButton/CompoundButton", "./IconButton/IconButton", "./PrimaryButton/PrimaryButton"], function (require, exports, React, Utilities_1, Button_Props_1, DefaultButton_1, CommandButton_1, CompoundButton_1, IconButton_1, PrimaryButton_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* This class is deprecated. Use the individual *Button components instead.
* @deprecated
*/
var Button = (function (_super) {
__extends(Button, _super);
function Button(props) {
var _this = _super.call(this, props) || this;
/**
* Set this BaseComponent._resolveComponentRef to false, bypassing resolution of componentRef.
*/
_this._shouldUpdateComponentRef = false;
Utilities_1.warn("The Button component has been deprecated. Use specific variants instead. " +
"(PrimaryButton, DefaultButton, IconButton, CommandButton, etc.)");
return _this;
}
Button.prototype.render = function () {
var props = this.props;
switch (props.buttonType) {
case Button_Props_1.ButtonType.command:
return React.createElement(CommandButton_1.CommandButton, __assign({}, props));
case Button_Props_1.ButtonType.compound:
return React.createElement(CompoundButton_1.CompoundButton, __assign({}, props));
case Button_Props_1.ButtonType.icon:
return React.createElement(IconButton_1.IconButton, __assign({}, props));
case Button_Props_1.ButtonType.primary:
return React.createElement(PrimaryButton_1.PrimaryButton, __assign({}, props));
default:
return React.createElement(DefaultButton_1.DefaultButton, __assign({}, props));
}
};
return Button;
}(Utilities_1.BaseComponent));
exports.Button = Button;
});
//# sourceMappingURL=Button.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "office-ui-fabric-react/lib/Checkbox", "./examples/Button.Default.Example", "./examples/Button.ContextualMenu.Example", "./examples/Button.Primary.Example", "./examples/Button.Compound.Example", "./examples/Button.Command.Example", "./examples/Button.Icon.Example", "./examples/Button.Anchor.Example", "./examples/Button.ScreenReader.Example", "../../Link", "./examples/Button.Basic.Example.scss"], function (require, exports, React, example_app_base_1, Checkbox_1, Button_Default_Example_1, Button_ContextualMenu_Example_1, Button_Primary_Example_1, Button_Compound_Example_1, Button_Command_Example_1, Button_Icon_Example_1, Button_Anchor_Example_1, Button_ScreenReader_Example_1, Link_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ButtonDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx');
var ButtonPrimaryExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx');
var ButtonCompoundExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx');
var ButtonCommandExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx');
var ButtonIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx');
var ButtonAnchorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx');
var ButtonScreenReaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx');
var ButtonContextualMenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx');
var ButtonPage = (function (_super) {
__extends(ButtonPage, _super);
function ButtonPage() {
var _this = _super.call(this) || this;
_this.state = {
areButtonsDisabled: false
};
return _this;
}
ButtonPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Button', componentName: 'ButtonExample', exampleCards: React.createElement("div", null,
React.createElement(Checkbox_1.Checkbox, { label: 'Disable buttons', checked: this.state.areButtonsDisabled, onChange: this._onDisabledChanged.bind(this) }),
React.createElement(example_app_base_1.ExampleCard, { title: 'Default Button', code: ButtonDefaultExampleCode },
React.createElement(Button_Default_Example_1.ButtonDefaultExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Primary Button', code: ButtonPrimaryExampleCode },
React.createElement(Button_Primary_Example_1.ButtonPrimaryExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Compound Button', code: ButtonCompoundExampleCode },
React.createElement(Button_Compound_Example_1.ButtonCompoundExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Command Button', code: ButtonCommandExampleCode },
React.createElement(Button_Command_Example_1.ButtonCommandExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon Button', code: ButtonIconExampleCode },
React.createElement(Button_Icon_Example_1.ButtonIconExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Contextual Menu Button', code: ButtonContextualMenuExampleCode },
React.createElement(Button_ContextualMenu_Example_1.ButtonContextualMenuExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Button Like Anchor', code: ButtonAnchorExampleCode },
React.createElement(Button_Anchor_Example_1.ButtonAnchorExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Button with Aria Description for Screen Reader', code: ButtonScreenReaderExampleCode },
React.createElement(Button_ScreenReader_Example_1.ButtonScreenReaderExample, { disabled: this.state.areButtonsDisabled }))), propertiesTables: React.createElement("div", null,
React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Button/Button.Props.ts')
] }),
React.createElement("p", null,
"Besides the above properties, the ",
React.createElement("code", null, "Button"),
" component accepts all properties that the React ",
React.createElement("code", null, "button"),
" and ",
React.createElement("code", null, "a"),
" components accept.")), overview: React.createElement("div", null,
React.createElement("p", null, "Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),
React.createElement("p", null, "When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements."),
React.createElement("p", null, "While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow."),
React.createElement("p", null,
"Note that both iconProps and menuIconProps take ",
React.createElement(Link_1.Link, { href: '#/examples/icon' }, "IIconProps"),
" to specify name and type.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Button/Button.html' }, "Fabric JS"), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Make sure the label conveys a clear purpose of the button to the user."),
React.createElement("li", null, "Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word."),
React.createElement("li", null, "Buttons should always include a noun if there is any room for interpretation about what the verb operates on."),
React.createElement("li", null, "Consider the affect localization will have on the button and what will happen to components around it."),
React.createElement("li", null, "If the button\u2019s label content is dynamic, consider how the button will resize and what will happen to components around it."),
React.createElement("li", null, "Use only a single line of text in the label of the button."),
React.createElement("li", null, "Expose only one or two buttons to the user at a time, for example, \"Accept\" and \"Cancel\". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions."),
React.createElement("li", null, "Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds."),
React.createElement("li", null, "\"Submit\", \"OK\", and \"Apply\" buttons should always be styled as primary buttons. When \"Reset\" or \"Cancel\" buttons appear alongside one of the above, they should be styled as secondary buttons."),
React.createElement("li", null, "Default buttons should always perform safe operations. For example, a default button should never delete."),
React.createElement("li", null, "Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use generic labels like \"Ok,\" especially in the case of an error; errors are never \"Ok.\""),
React.createElement("li", null, "Don\u2019t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the \"safe act\" and retains the content (i.e. \"Save\") or cancels the action (i.e. \"Cancel\")."),
React.createElement("li", null, "Don\u2019t use a button to navigate to another place, use a link instead. The exception is in a wizard where \"Back\" and \"Next\" buttons may be used."),
React.createElement("li", null, "Don\u2019t put too much text in a button - try to keep the length of your text to a minimum."),
React.createElement("li", null, "Don't put anything other than text in a button."))), isHeaderVisible: this.props.isHeaderVisible }));
};
ButtonPage.prototype._onDisabledChanged = function (ev, disabled) {
this.setState({
areButtonsDisabled: disabled
});
};
return ButtonPage;
}(React.Component));
exports.ButtonPage = ButtonPage;
});
//# sourceMappingURL=ButtonPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'commandButton'). then(function () { phantomcss.screenshot('#CommandButton', 'CommandButton_not_pressed'); }).then(function () { this.mouse.move('#CommandButton'); phantomcss.screenshot('#CommandButton', 'CommandButton_hovered'); }).then(function () { this.mouse.down('#CommandButton'); phantomcss.screenshot('#CommandButton', 'CommandButton_pressed'); }).then(function () { phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_not_pressed'); }).then(function () { this.mouse.move('#CommandButtonDisabled'); phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_hovered'); }).then(function () { this.mouse.down('#CommandButtonDisabled'); phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=CommandButton.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var CommandButtonVPage = (function (_super) {
__extends(CommandButtonVPage, _super);
function CommandButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CommandButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.CommandButton, { id: 'CommandButton', icon: 'AddFriend', text: 'Command Button' })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.CommandButton, { id: 'CommandButtonDisabled', icon: 'AddFriend', disabled: true, text: 'Command Button' })));
};
return CommandButtonVPage;
}(React.Component));
exports.default = CommandButtonVPage;
});
//# sourceMappingURL=CommandButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'compoundButton'). then(function () { phantomcss.screenshot('#CompoundButton', 'CompoundButton_not_pressed'); }).then(function () { this.mouse.move('#CompoundButton'); phantomcss.screenshot('#CompoundButton', 'CompoundButton_hovered'); }).then(function () { this.mouse.down('#CompoundButton'); phantomcss.screenshot('#CompoundButton', 'CompoundButton_pressed'); }). then(function () { phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_not_pressed'); }).then(function () { this.mouse.move('#CompoundButtonDisabled'); phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_hovered'); }).then(function () { this.mouse.down('#CompoundButtonDisabled'); phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=CompoundButton.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var CompoundButtonVPage = (function (_super) {
__extends(CompoundButtonVPage, _super);
function CompoundButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CompoundButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.CompoundButton, { id: 'CompoundButton', description: 'You can create a new account here.', text: 'Compound Button' })),
React.createElement("div", null,
React.createElement(index_1.CompoundButton, { id: 'CompoundButtonDisabled', disabled: true, description: 'You can create a new account here.', text: 'Compound Button' })));
};
return CompoundButtonVPage;
}(React.Component));
exports.default = CompoundButtonVPage;
});
//# sourceMappingURL=CompoundButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'contextualButton'). then(function () { phantomcss.screenshot('#ContextualButton', 'ContextualButton_not_pressed'); }).then(function () { this.mouse.move('#ContextualButton'); phantomcss.screenshot('#ContextualButton', 'ContextualButton_hovered'); }).then(function () { this.mouse.down('#ContextualButton'); casper.wait(2000); phantomcss.screenshot('#ContextualButton', 'ContextualButton_pressed'); phantomcss.screenshot('.ContextualButtonMenu', 'ContextualButtonMenu_pressed'); }). then(function () { phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_not_pressed'); }).then(function () { this.mouse.move('#ContextualButtonDisabled'); phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_hovered'); }).then(function () { this.mouse.down('#ContextualButtonDisabled'); phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=ContextualButton.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var CommandButtonVPage = (function (_super) {
__extends(CommandButtonVPage, _super);
function CommandButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CommandButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.DefaultButton, { id: 'ContextualButton', disabled: false, icon: 'Add', text: 'New', menuProps: {
className: 'ContextualButtonMenu',
id: 'ContextualButtonMenu',
items: [
{
key: 'emailMessage',
name: 'Email message',
icon: 'Mail'
},
{
key: 'calendarEvent',
name: 'Calendar event',
icon: 'Calendar'
}
]
} })),
React.createElement("div", null,
React.createElement(index_1.DefaultButton, { id: 'ContextualButtonDisabled', icon: 'Add', text: 'New', disabled: true })));
};
return CommandButtonVPage;
}(React.Component));
exports.default = CommandButtonVPage;
});
//# sourceMappingURL=ContextualButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'defaultButton'). then(function () { phantomcss.screenshot('#DefaultButton', 'DefaultButton_not_pressed'); }).then(function () { this.mouse.move('#DefaultButton'); phantomcss.screenshot('#DefaultButton', 'DefaultButton_hovered'); }).then(function () { this.mouse.down('#DefaultButton'); phantomcss.screenshot('#DefaultButton', 'DefaultButton_pressed'); }). then(function () { phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_not_pressed'); }).then(function () { this.mouse.move('#DefaultButtonDisabled'); phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_hovered'); }).then(function () { this.mouse.down('#DefaultButtonDisabled'); phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_pressed'); }).then(function () { phantomcss.screenshot('#IconButton', 'Icon_Button'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=DefaultButton.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var DefaultButtonVPage = (function (_super) {
__extends(DefaultButtonVPage, _super);
function DefaultButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DefaultButtonVPage.prototype.render = function () {
var iconName = 'Snow';
return React.createElement("div", null,
React.createElement("div", null,
React.createElement("label", null, " Default Button: "),
React.createElement(index_1.DefaultButton, { id: 'DefaultButton', icon: 'Add', text: 'Default Button' })),
React.createElement("div", null,
React.createElement("label", null, " Default Button Disabled: "),
React.createElement(index_1.DefaultButton, { id: 'DefaultButtonDisabled', disabled: true, icon: 'Add', text: 'Default Button' })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.IconButton, { id: 'IconButton', iconProps: { iconName: iconName } })));
};
return DefaultButtonVPage;
}(React.Component));
exports.default = DefaultButtonVPage;
});
//# sourceMappingURL=DefaultButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'primaryButton'). then(function () { phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_not_pressed'); }).then(function () { this.mouse.move('#PrimaryButton'); phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_hovered'); }).then(function () { this.mouse.down('#PrimaryButton'); phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_pressed'); }).then(function () { phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_not_pressed'); }).then(function () { this.mouse.move('#PrimaryButtonDisabled'); phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_hovered'); }).then(function () { this.mouse.down('#PrimaryButtonDisabled'); phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=PrimaryButton.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var PrimaryButtonVPage = (function (_super) {
__extends(PrimaryButtonVPage, _super);
function PrimaryButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PrimaryButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.PrimaryButton, { id: 'PrimaryButton', icon: 'Add', text: 'Primary Button' })),
React.createElement("div", null,
React.createElement(index_1.PrimaryButton, { id: 'PrimaryButtonDisabled', disabled: true, icon: 'Add', text: 'Primary Button' })));
};
return PrimaryButtonVPage;
}(React.Component));
exports.default = PrimaryButtonVPage;
});
//# sourceMappingURL=PrimaryButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 2 1 | define(["require", "exports", "./BaseButton", "./Button.Props", "./Button", "./CommandButton/CommandButton", "./CompoundButton/CompoundButton", "./DefaultButton/DefaultButton", "./PrimaryButton/PrimaryButton", "./IconButton/IconButton"], function (require, exports, BaseButton_1, Button_Props_1, Button_1, CommandButton_1, CompoundButton_1, DefaultButton_1, PrimaryButton_1, IconButton_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(BaseButton_1); __export(Button_Props_1); __export(Button_1); __export(CommandButton_1); __export(CompoundButton_1); __export(DefaultButton_1); __export(PrimaryButton_1); __export(IconButton_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Calendar.Props.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| Calendar.js | 7.95% | (7 / 88) | 10.45% | (7 / 67) | 5% | (1 / 20) | 8.54% | (7 / 82) | |
| Calendar.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| CalendarDay.js | 6.25% | (7 / 112) | 8.24% | (7 / 85) | 4.35% | (1 / 23) | 6.6% | (7 / 106) | |
| CalendarMonth.js | 13.95% | (6 / 43) | 26.67% | (4 / 15) | 6.67% | (1 / 15) | 15% | (6 / 40) | |
| CalendarPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 | 2 | define(["require", "exports", "../../utilities/dateValues/DateValues"], function (require, exports, DateValues_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.DayOfWeek = DateValues_1.DayOfWeek; exports.DateRangeType = DateValues_1.DateRangeType; }); //# sourceMappingURL=Calendar.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../utilities/dateValues/DateValues", "./CalendarDay", "./CalendarMonth", "../../Utilities", "./Calendar.scss"], function (require, exports, React, DateValues_1, CalendarDay_1, CalendarMonth_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Calendar = (function (_super) {
__extends(Calendar, _super);
function Calendar(props) {
var _this = _super.call(this) || this;
var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : new Date();
_this.state = {
selectedDate: currentDate,
navigatedDate: currentDate
};
_this._focusOnUpdate = false;
return _this;
}
Calendar.prototype.componentWillReceiveProps = function (nextProps) {
var value = nextProps.value;
this.setState({
selectedDate: value || new Date()
});
};
Calendar.prototype.componentDidUpdate = function () {
if (this._focusOnUpdate) {
this.refs.dayPicker.focus();
this._focusOnUpdate = false;
}
};
Calendar.prototype.render = function () {
var rootClass = 'ms-DatePicker';
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType, strings = _a.strings, isMonthPickerVisible = _a.isMonthPickerVisible, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday;
var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate;
return (React.createElement("div", { className: Utilities_1.css(rootClass, styles.root), ref: 'root' },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, isMonthPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible)) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-holder', styles.holder), onKeyDown: this._onDatePickerPopupKeyDown },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-frame', styles.frame) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-wrap', styles.wrap) },
React.createElement(CalendarDay_1.CalendarDay, { selectedDate: selectedDate, navigatedDate: navigatedDate, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, onDismiss: this.props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, autoNavigateOnSelection: autoNavigateOnSelection, strings: strings, ref: 'dayPicker' }),
isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate }),
showGoToToday && React.createElement("span", { className: Utilities_1.css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday)))))));
};
Calendar.prototype.focus = function () {
if (this.refs.dayPicker) {
this.refs.dayPicker.focus();
}
};
Calendar.prototype._navigateDay = function (date) {
this.setState({
navigatedDate: date
});
};
Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
this._navigateDay(date);
this._focusOnUpdate = focusOnNavigatedDay;
};
Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
var onSelectDate = this.props.onSelectDate;
this.setState({
selectedDate: date
});
if (onSelectDate) {
onSelectDate(date, selectedDateRangeArray);
}
};
;
Calendar.prototype._onGotoToday = function () {
this._navigateDay(new Date());
this._focusOnUpdate = true;
};
;
Calendar.prototype._onGotoTodayKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.enter) {
ev.preventDefault();
this._onGotoToday();
}
else if (ev.which === Utilities_1.KeyCodes.tab && !ev.shiftKey) {
if (this.props.onDismiss) {
ev.stopPropagation();
ev.preventDefault();
this.props.onDismiss();
}
}
};
;
Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
ev.preventDefault();
break;
case Utilities_1.KeyCodes.backspace:
ev.preventDefault();
break;
case Utilities_1.KeyCodes.escape:
this._handleEscKey(ev);
break;
default:
break;
}
};
Calendar.prototype._handleEscKey = function (ev) {
if (this.props.onDismiss() != null) {
this.props.onDismiss();
}
};
return Calendar;
}(Utilities_1.BaseComponent));
Calendar.defaultProps = {
onSelectDate: null,
onDismiss: null,
isMonthPickerVisible: true,
value: null,
firstDayOfWeek: DateValues_1.DayOfWeek.Sunday,
dateRangeType: DateValues_1.DateRangeType.Day,
autoNavigateOnSelection: false,
showGoToToday: true,
strings: null
};
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_navigateDay", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onNavigateDate", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onSelectDate", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onGotoToday", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onGotoTodayKeyDown", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_handleEscKey", null);
exports.Calendar = Calendar;
});
//# sourceMappingURL=Calendar.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_99842107', picker: 'picker_99842107', holder: 'holder_99842107', pickerIsOpened: 'pickerIsOpened_99842107', fadeIn: 'fadeIn_99842107', slideDownIn10: 'slideDownIn10_99842107', frame: 'frame_99842107', wrap: 'wrap_99842107', dayPicker: 'dayPicker_99842107', header: 'header_99842107', month: 'month_99842107', year: 'year_99842107', table: 'table_99842107', day: 'day_99842107', weekday: 'weekday_99842107', dayIsToday: 'dayIsToday_99842107', dayIsDisabled: 'dayIsDisabled_99842107', dayIsUnfocused: 'dayIsUnfocused_99842107', dayIsFocused: 'dayIsFocused_99842107', dayIsHighlighted: 'dayIsHighlighted_99842107', pickerIsFocused: 'pickerIsFocused_99842107', dayDisabled: 'dayDisabled_99842107', monthPicker: 'monthPicker_99842107', yearPicker: 'yearPicker_99842107', monthComponents: 'monthComponents_99842107', yearComponents: 'yearComponents_99842107', decadeComponents: 'decadeComponents_99842107', prevMonth: 'prevMonth_99842107', nextMonth: 'nextMonth_99842107', prevYear: 'prevYear_99842107', nextYear: 'nextYear_99842107', prevDecade: 'prevDecade_99842107', nextDecade: 'nextDecade_99842107', headerToggleView: 'headerToggleView_99842107', currentYear: 'currentYear_99842107', currentDecade: 'currentDecade_99842107', optionGrid: 'optionGrid_99842107', monthOption: 'monthOption_99842107', yearOption: 'yearOption_99842107', isHighlighted: 'isHighlighted_99842107', goToday: 'goToday_99842107', isPickingYears: 'isPickingYears_99842107', pickerIsMonthPickerVisible: 'pickerIsMonthPickerVisible_99842107', toggleMonthView: 'toggleMonthView_99842107', isPickingMonths: 'isPickingMonths_99842107', navContainer: 'navContainer_99842107', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_99842107{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px}.picker_99842107{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-size:14px;position:relative}html[dir=ltr] .picker_99842107{text-align:left}html[dir=rtl] .picker_99842107{text-align:right}.holder_99842107{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:300px;display:none}.picker_99842107.pickerIsOpened_99842107 .holder_99842107{-webkit-animation-name:fadeIn_99842107,slideDownIn10_99842107;animation-name:fadeIn_99842107,slideDownIn10_99842107;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;display:block}.pickerIsOpened_99842107{position:relative}.frame_99842107{padding:1px;position:relative}.wrap_99842107{margin:-1px;padding:9px}.dayPicker_99842107{display:block;margin-bottom:30px}.header_99842107{height:40px;line-height:44px}.month_99842107,.year_99842107{display:inline-block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-top:-1px}.month_99842107:hover,.year_99842107:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}html[dir=ltr] .month_99842107{margin-left:15px}html[dir=rtl] .month_99842107{margin-right:15px}html[dir=ltr] .year_99842107{margin-left:15px}html[dir=rtl] .year_99842107{margin-right:15px}.table_99842107{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.table_99842107 td{margin:0;padding:0}.table_99842107 td:hover{outline:1px solid transparent}.day_99842107,.weekday_99842107{width:40px;height:40px;padding:0;line-height:40px;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.dayIsToday_99842107{position:relative;background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.dayIsDisabled_99842107:before{border-top-color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.dayIsUnfocused_99842107{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";font-weight:400}.dayIsFocused_99842107:hover,.dayIsUnfocused_99842107:hover{cursor:pointer;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.day_99842107.dayIsHighlighted_99842107.dayIsFocused_99842107::-moz-focus-inner{border:0}.day_99842107.dayIsHighlighted_99842107.dayIsFocused_99842107{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .day_99842107.dayIsHighlighted_99842107.dayIsFocused_99842107:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.dayIsHighlighted_99842107:hover,.pickerIsFocused_99842107 .dayIsHighlighted_99842107{cursor:pointer;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.dayIsHighlighted_99842107.dayDisabled_99842107,.dayIsHighlighted_99842107.dayDisabled_99842107:hover{background:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.monthPicker_99842107,.yearPicker_99842107{display:none}.monthComponents_99842107{position:absolute;top:9px}html[dir=ltr] .monthComponents_99842107{right:9px}html[dir=rtl] .monthComponents_99842107{left:9px}html[dir=ltr] .monthComponents_99842107{left:9px}html[dir=rtl] .monthComponents_99842107{right:9px}.decadeComponents_99842107,.yearComponents_99842107{position:absolute;top:-2px}html[dir=ltr] .decadeComponents_99842107,html[dir=ltr] .yearComponents_99842107{right:10px}html[dir=rtl] .decadeComponents_99842107,html[dir=rtl] .yearComponents_99842107{left:10px}.nextDecade_99842107,.nextMonth_99842107,.nextYear_99842107,.prevDecade_99842107,.prevMonth_99842107,.prevYear_99842107{width:40px;height:40px;display:block;text-align:center;line-height:40px;text-align:center;font-size:16px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";position:relative;top:2px}html[dir=ltr] .nextDecade_99842107,html[dir=ltr] .nextMonth_99842107,html[dir=ltr] .nextYear_99842107,html[dir=ltr] .prevDecade_99842107,html[dir=ltr] .prevMonth_99842107,html[dir=ltr] .prevYear_99842107{margin-left:10px}html[dir=rtl] .nextDecade_99842107,html[dir=rtl] .nextMonth_99842107,html[dir=rtl] .nextYear_99842107,html[dir=rtl] .prevDecade_99842107,html[dir=rtl] .prevMonth_99842107,html[dir=rtl] .prevYear_99842107{margin-right:10px}.nextDecade_99842107:hover,.nextMonth_99842107:hover,.nextYear_99842107:hover,.prevDecade_99842107:hover,.prevMonth_99842107:hover,.prevYear_99842107:hover{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";cursor:pointer;outline:1px solid transparent}.headerToggleView_99842107{height:40px;position:absolute;top:0;width:140px;cursor:pointer}html[dir=ltr] .headerToggleView_99842107{left:0}html[dir=rtl] .headerToggleView_99842107{right:0}.currentDecade_99842107,.currentYear_99842107{display:block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:40px;line-height:40px}html[dir=ltr] .currentDecade_99842107,html[dir=ltr] .currentYear_99842107{margin-left:15px}html[dir=rtl] .currentDecade_99842107,html[dir=rtl] .currentYear_99842107{margin-right:15px}.currentYear_99842107{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.currentYear_99842107:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}.optionGrid_99842107{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}html[dir=rtl] .optionGrid_99842107{margin:10px 5px 30px 0}.monthOption_99842107,.yearOption_99842107{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";width:60px;height:60px;line-height:60px;cursor:pointer;margin:0 10px 10px 0;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:13px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";text-align:center}html[dir=ltr] .monthOption_99842107,html[dir=ltr] .yearOption_99842107{float:left}html[dir=rtl] .monthOption_99842107,html[dir=rtl] .yearOption_99842107{float:right}html[dir=rtl] .monthOption_99842107,html[dir=rtl] .yearOption_99842107{margin:0 0 10px 10px}.monthOption_99842107:hover,.yearOption_99842107:hover{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";outline:1px solid transparent}.monthOption_99842107.isHighlighted_99842107,.yearOption_99842107.isHighlighted_99842107{background-color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.goToday_99842107{bottom:9px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";cursor:pointer;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:13px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:30px;line-height:30px;padding:0 10px;position:absolute!important}html[dir=ltr] .goToday_99842107{right:3px}html[dir=rtl] .goToday_99842107{left:3px}.goToday_99842107:hover{outline:1px solid transparent}.root_99842107.isPickingYears_99842107 .dayPicker_99842107,.root_99842107.isPickingYears_99842107 .monthComponents_99842107{display:none}.root_99842107.isPickingYears_99842107 .monthPicker_99842107{display:none}.root_99842107.isPickingYears_99842107 .yearPicker_99842107{display:block}@media (min-width:460px){.header_99842107{height:30px;line-height:30px}.day_99842107,.weekday_99842107{width:30px;height:30px;line-height:28px;font-weight:600;font-size:12px}.monthComponents_99842107{width:210px}.nextDecade_99842107,.nextMonth_99842107,.nextYear_99842107,.prevDecade_99842107,.prevMonth_99842107,.prevYear_99842107{font-size:12px;width:24px;height:24px;line-height:24px}.holder_99842107{min-width:240px}.month_99842107,.year_99842107{font-weight:300}.month_99842107,.year_99842107{font-size:17px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.month_99842107:hover,.year_99842107:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";cursor:default}.pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{margin:-10px 0;padding:10px 0}.pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{box-sizing:border-box;width:220px;min-height:230px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.pickerIsMonthPickerVisible_99842107 .holder_99842107{width:440px}.pickerIsMonthPickerVisible_99842107 .monthPicker_99842107{display:block}.pickerIsMonthPickerVisible_99842107 .monthPicker_99842107,.pickerIsMonthPickerVisible_99842107 .yearPicker_99842107{top:9px;position:absolute}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .monthPicker_99842107,html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .yearPicker_99842107{left:238px}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .monthPicker_99842107,html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .yearPicker_99842107{right:238px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .month_99842107{margin-left:12px}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .month_99842107{margin-right:12px}.pickerIsMonthPickerVisible_99842107 .optionGrid_99842107{width:200px;height:auto;margin:10px 0 0 0}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .optionGrid_99842107{margin:10px 0 0 0}.pickerIsMonthPickerVisible_99842107 .toggleMonthView_99842107{display:none}.pickerIsMonthPickerVisible_99842107 .currentDecade_99842107,.pickerIsMonthPickerVisible_99842107 .currentYear_99842107{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.pickerIsMonthPickerVisible_99842107 .monthOption_99842107,.pickerIsMonthPickerVisible_99842107 .yearOption_99842107{width:40px;height:40px;line-height:38px;font-size:12px;margin:0 10px 10px 0}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .monthOption_99842107,html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .yearOption_99842107{margin:0 0 10px 10px}.pickerIsMonthPickerVisible_99842107 .monthOption_99842107:hover,.pickerIsMonthPickerVisible_99842107 .yearOption_99842107:hover{outline:1px solid transparent}.pickerIsMonthPickerVisible_99842107 .goToday_99842107{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;top:199px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{right:3px}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{left:3px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{text-align:right}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{text-align:left}.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .dayPicker_99842107,.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .monthComponents_99842107{display:block}.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .monthPicker_99842107{display:none}.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .yearPicker_99842107{display:block}}@media (max-width:459px){.root_99842107.isPickingMonths_99842107 .dayPicker_99842107,.root_99842107.isPickingMonths_99842107 .monthComponents_99842107{display:none}.root_99842107.isPickingMonths_99842107 .monthPicker_99842107{display:block}}.wrap_99842107 div:focus::-moz-focus-inner,.wrap_99842107 span:focus::-moz-focus-inner{border:0}.wrap_99842107 div:focus,.wrap_99842107 span:focus{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .wrap_99842107 div:focus:focus:after,.ms-Fabric.is-focusVisible .wrap_99842107 span:focus:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.goToday_99842107{width:auto}.nextMonth_99842107,.nextYear_99842107,.prevMonth_99842107,.prevYear_99842107{display:inline-block}html[dir=ltr] .navContainer_99842107{float:right}html[dir=rtl] .navContainer_99842107{float:left}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Calendar.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../utilities/dateMath/DateMath", "./Calendar.scss"], function (require, exports, React, Utilities_1, FocusZone_1, DateMath_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DAYS_IN_WEEK = 7;
var CalendarDay = (function (_super) {
__extends(CalendarDay, _super);
function CalendarDay(props) {
var _this = _super.call(this, props) || this;
_this.state = {
activeDescendantId: Utilities_1.getId('DatePickerDay-active'),
weeks: _this._getWeeks(props.navigatedDate, props.selectedDate)
};
_this._onSelectNextMonth = _this._onSelectNextMonth.bind(_this);
_this._onSelectPrevMonth = _this._onSelectPrevMonth.bind(_this);
return _this;
}
CalendarDay.prototype.componentWillReceiveProps = function (nextProps) {
this.setState({
weeks: this._getWeeks(nextProps.navigatedDate, nextProps.selectedDate)
});
};
CalendarDay.prototype.render = function () {
var _this = this;
var _a = this.state, activeDescendantId = _a.activeDescendantId, weeks = _a.weeks;
var _b = this.props, firstDayOfWeek = _b.firstDayOfWeek, strings = _b.strings, navigatedDate = _b.navigatedDate, onSelectDate = _b.onSelectDate;
var dayPickerId = Utilities_1.getId('DatePickerDay-dayPicker');
var monthAndYearId = Utilities_1.getId('DatePickerDay-monthAndYear');
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-dayPicker', styles.dayPicker), id: dayPickerId },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
React.createElement("div", { "aria-live": 'polite', "aria-relevant": 'text', "aria-atomic": 'true', id: monthAndYearId },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-month', styles.month) }, strings.months[navigatedDate.getMonth()]),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-year', styles.year) }, navigatedDate.getFullYear()))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthComponents', styles.monthComponents) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', styles.navContainer) },
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth), onClick: this._onSelectPrevMonth, onKeyDown: this._onPrevMonthKeyDown, "aria-controls": dayPickerId, "aria-label": strings.nextMonthAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !Utilities_1.getRTL(), 'ms-Icon--ChevronRight': Utilities_1.getRTL() }) })),
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth), onClick: this._onSelectNextMonth, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextMonth), "aria-controls": dayPickerId, "aria-label": strings.nextMonthAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': Utilities_1.getRTL(), 'ms-Icon--ChevronRight': !Utilities_1.getRTL() }) }))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-headerToggleView js-showMonthPicker', styles.headerToggleView) })),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement("table", { className: Utilities_1.css('ms-DatePicker-table', styles.table), role: 'grid', "aria-readonly": 'true', "aria-multiselectable": 'false', "aria-labelledby": monthAndYearId, "aria-activedescendant": activeDescendantId },
React.createElement("thead", null,
React.createElement("tr", null, strings.shortDays.map(function (val, index) {
return React.createElement("th", { className: Utilities_1.css('ms-DatePicker-weekday', styles.weekday), scope: 'col', key: index, title: strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }, strings.shortDays[(index + firstDayOfWeek) % DAYS_IN_WEEK]);
}))),
React.createElement("tbody", null, weeks.map(function (week, weekIndex) {
return React.createElement("tr", { key: weekIndex }, week.map(function (day, dayIndex) {
return React.createElement("td", { role: 'presentation', key: day.key },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-day', styles.day, (_a = {},
_a['ms-DatePicker-day--infocus ' + styles.dayIsFocused] = day.isInMonth,
_a['ms-DatePicker-day--outfocus ' + styles.dayIsUnfocused] = !day.isInMonth,
_a['ms-DatePicker-day--today ' + styles.dayIsToday] = day.isToday,
_a['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted] = day.isSelected,
_a)), role: 'gridcell', onClick: day.onSelected, onKeyDown: function (ev) {
return _this._navigateMonthEdge(ev, day.originalDate, weekIndex, dayIndex);
}, "aria-selected": day.isSelected, "aria-label": day.originalDate.toLocaleDateString ? day.originalDate.toLocaleDateString() : day.originalDate.getDate(), id: DateMath_1.compareDates(navigatedDate, day.originalDate) ? activeDescendantId : null, "data-is-focusable": true, ref: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null, key: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null }, day.date));
var _a;
}));
}))))));
};
CalendarDay.prototype.focus = function () {
if (this.refs.navigatedDay) {
this.refs.navigatedDay.tabIndex = 0;
this.refs.navigatedDay.focus();
}
};
CalendarDay.prototype._navigateMonthEdge = function (ev, date, weekIndex, dayIndex) {
if (weekIndex === 0 && ev.which === Utilities_1.KeyCodes.up) {
this.props.onNavigateDate(DateMath_1.addWeeks(date, -1), true);
ev.preventDefault();
}
else if (weekIndex === (this.state.weeks.length - 1) && ev.which === Utilities_1.KeyCodes.down) {
this.props.onNavigateDate(DateMath_1.addWeeks(date, 1), true);
ev.preventDefault();
}
else if (dayIndex === 0 && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left)) {
this.props.onNavigateDate(DateMath_1.addDays(date, -1), true);
ev.preventDefault();
}
else if (dayIndex === (DAYS_IN_WEEK - 1) && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)) {
this.props.onNavigateDate(DateMath_1.addDays(date, 1), true);
ev.preventDefault();
}
};
CalendarDay.prototype._onKeyDown = function (callback, ev) {
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
callback();
}
};
CalendarDay.prototype._onSelectDate = function (selectedDate) {
var _a = this.props, onSelectDate = _a.onSelectDate, dateRangeType = _a.dateRangeType, firstDayOfWeek = _a.firstDayOfWeek, navigatedDate = _a.navigatedDate, autoNavigateOnSelection = _a.autoNavigateOnSelection;
var dateRange = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek);
if (onSelectDate != null) {
onSelectDate(selectedDate, dateRange);
}
// Navigate to next or previous month if needed
if (autoNavigateOnSelection && selectedDate.getMonth() !== navigatedDate.getMonth()) {
var compareResult = DateMath_1.compareDatePart(selectedDate, navigatedDate);
if (compareResult < 0) {
this._onSelectPrevMonth();
}
else if (compareResult > 0) {
this._onSelectNextMonth();
}
}
};
CalendarDay.prototype._onSelectNextMonth = function () {
this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, 1), false);
};
CalendarDay.prototype._onSelectPrevMonth = function () {
this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, -1), false);
};
CalendarDay.prototype._onPrevMonthKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.tab && ev.shiftKey) {
if (this.props.onDismiss) {
ev.preventDefault();
ev.stopPropagation();
this.props.onDismiss();
}
}
else {
this._onKeyDown(this._onSelectPrevMonth, ev);
}
};
CalendarDay.prototype._getWeeks = function (navigatedDate, selectedDate) {
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType;
var date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
var today = new Date();
var weeks = [];
var week;
// Cycle the date backwards to get to the first day of the week.
while (date.getDay() !== firstDayOfWeek) {
date.setDate(date.getDate() - 1);
}
// a flag to indicate whether all days of the week are in the month
var isAllDaysOfWeekOutOfMonth = false;
var selectedDates = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek);
for (var weekIndex = 0; !isAllDaysOfWeekOutOfMonth; weekIndex++) {
week = [];
isAllDaysOfWeekOutOfMonth = true;
for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
var originalDate = new Date(date.toString());
var dayInfo = {
key: date.toString(),
date: date.getDate(),
originalDate: originalDate,
isInMonth: date.getMonth() === navigatedDate.getMonth(),
isToday: DateMath_1.compareDates(today, date),
isSelected: DateMath_1.isInDateRangeArray(date, selectedDates),
onSelected: this._onSelectDate.bind(this, originalDate)
};
week.push(dayInfo);
if (dayInfo.isInMonth) {
isAllDaysOfWeekOutOfMonth = false;
}
date.setDate(date.getDate() + 1);
}
if (!isAllDaysOfWeekOutOfMonth) {
weeks.push(week);
}
}
return weeks;
};
return CalendarDay;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], CalendarDay.prototype, "_onPrevMonthKeyDown", null);
exports.CalendarDay = CalendarDay;
});
//# sourceMappingURL=CalendarDay.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../utilities/dateMath/DateMath", "./Calendar.scss"], function (require, exports, React, Utilities_1, FocusZone_1, DateMath_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CalendarMonth = (function (_super) {
__extends(CalendarMonth, _super);
function CalendarMonth(props) {
var _this = _super.call(this, props) || this;
_this._selectMonthCallbacks = [];
props.strings.shortMonths.map(function (month, index) {
_this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index);
});
_this._onSelectNextYear = _this._onSelectNextYear.bind(_this);
_this._onSelectPrevYear = _this._onSelectPrevYear.bind(_this);
_this._onSelectMonth = _this._onSelectMonth.bind(_this);
return _this;
}
CalendarMonth.prototype.render = function () {
var _this = this;
var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings;
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', styles.yearComponents, styles.navContainer) },
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), "aria-label": strings.prevYearAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !Utilities_1.getRTL(), 'ms-Icon--ChevronRight': Utilities_1.getRTL() }) })),
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), "aria-label": strings.nextYearAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': Utilities_1.getRTL(), 'ms-Icon--ChevronRight': !Utilities_1.getRTL() }) }))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, navigatedDate.getFullYear())),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid) }, strings.shortMonths.map(function (month, index) {
return (React.createElement("span", { className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": DateMath_1.setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }), "data-is-focusable": true }, month));
})))));
};
CalendarMonth.prototype._onKeyDown = function (callback, ev) {
if (ev.which === Utilities_1.KeyCodes.enter) {
callback();
}
};
CalendarMonth.prototype._onSelectNextYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false);
};
;
CalendarMonth.prototype._onSelectPrevYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
};
;
CalendarMonth.prototype._onSelectMonth = function (newMonth) {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
};
return CalendarMonth;
}(Utilities_1.BaseComponent));
exports.CalendarMonth = CalendarMonth;
});
//# sourceMappingURL=CalendarMonth.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "office-ui-fabric-react/lib/Calendar", "./examples/Calendar.Button.Example", "./examples/Calendar.Inline.Example"], function (require, exports, React, example_app_base_1, Calendar_1, Calendar_Button_Example_1, Calendar_Inline_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx');
var CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx');
var CalendarPage = (function (_super) {
__extends(CalendarPage, _super);
function CalendarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CalendarPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Calendar', componentName: 'CalendarExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: false })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month picker', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: true, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with week selection', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: true, dateRangeType: Calendar_1.DateRangeType.Week, autoNavigateOnSelection: true, showGoToToday: true })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month selection', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: true, dateRangeType: Calendar_1.DateRangeType.Month, autoNavigateOnSelection: true, showGoToToday: true })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Calendar launched from a button', code: CalendarButtonExampleCode },
React.createElement(Calendar_Button_Example_1.CalendarButtonExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The calendar component allows a user to browse through a calendar and pick a date value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the control as a single entity."),
React.createElement("li", null, "Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference)."),
React.createElement("li", null, "The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate."),
React.createElement("li", null, "When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px \u2013 wide). Plan your UI implementation accordingly."),
React.createElement("li", null, "The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar."),
React.createElement("li", null, "Don't attempt to force resize the control in any way."),
React.createElement("li", null, "Don't force the control to render one mode vs. the other (year or month/day)"),
React.createElement("li", null, "The flyout selector is a light dismiss control. Don't modify this behavior in any way."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return CalendarPage;
}(React.Component));
exports.CalendarPage = CalendarPage;
});
//# sourceMappingURL=CalendarPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Calendar", "./Calendar.Props"], function (require, exports, Calendar_1, Calendar_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Calendar_1); __export(Calendar_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Callout.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Callout.js | 24.14% | (7 / 29) | 33.33% | (7 / 21) | 10% | (1 / 10) | 28% | (7 / 25) | |
| Callout.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| CalloutContent.js | 4.61% | (7 / 152) | 4.9% | (7 / 143) | 4% | (1 / 25) | 4.79% | (7 / 146) | |
| CalloutPage.js | 21.21% | (7 / 33) | 35% | (7 / 20) | 10% | (1 / 10) | 24.14% | (7 / 29) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Callout.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./CalloutContent", "../../Layer"], function (require, exports, React, Utilities_1, CalloutContent_1, Layer_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Callout = (function (_super) {
__extends(Callout, _super);
function Callout(props) {
return _super.call(this, props) || this;
}
Callout.prototype.render = function () {
var content = (React.createElement(CalloutContent_1.CalloutContent, __assign({}, this.props)));
return this.props.doNotLayer ? content : (React.createElement(Layer_1.Layer, null, content));
};
return Callout;
}(Utilities_1.BaseComponent));
exports.Callout = Callout;
});
//# sourceMappingURL=Callout.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_669777ac', container: 'container_669777ac', main: 'main_669777ac', beak: 'beak_669777ac', beakCurtain: 'beakCurtain_669777ac', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_669777ac{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 15px -5px rgba(0,0,0,.4);position:absolute;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}@media screen and (-ms-high-contrast:active){.root_669777ac{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_669777ac{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.container_669777ac{position:relative}.main_669777ac{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";overflow-x:hidden;overflow-y:auto;position:relative}.beak_669777ac{position:absolute;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:inherit;border:inherit;box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.beakCurtain_669777ac{position:absolute;top:0;right:0;bottom:0;left:0;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Callout.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../common/DirectionalHint", "../../Utilities", "../../utilities/positioning", "../../Popup", "./Callout.scss"], function (require, exports, React, DirectionalHint_1, Utilities_1, positioning_1, Popup_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
var OFF_SCREEN_STYLE = { opacity: 0 };
var BORDER_WIDTH = 1;
var SPACE_FROM_EDGE = 8;
var CalloutContent = (function (_super) {
__extends(CalloutContent, _super);
function CalloutContent(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ 'beakStyle': 'beakWidth' });
_this._didSetInitialFocus = false;
_this.state = {
positions: null,
slideDirectionalClassName: null,
calloutElementRect: null
};
_this._positionAttempts = 0;
return _this;
}
CalloutContent.prototype.componentDidUpdate = function () {
this._setInitialFocus();
this._updatePosition();
};
CalloutContent.prototype.componentWillMount = function () {
var target = this.props.targetElement ? this.props.targetElement : this.props.target;
this._setTargetWindowAndElement(target);
};
CalloutContent.prototype.componentWillUpdate = function (newProps) {
if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) {
var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target;
this._maxHeight = undefined;
this._setTargetWindowAndElement(newTarget);
}
if (newProps.gapSpace !== this.props.gapSpace || this.props.beakWidth !== newProps.beakWidth) {
this._maxHeight = undefined;
}
};
CalloutContent.prototype.componentDidMount = function () {
this._onComponentDidMount();
};
CalloutContent.prototype.render = function () {
// If there is no target window then we are likely in server side rendering and we should not render anything.
if (!this._targetWindow) {
return null;
}
var _a = this.props, className = _a.className, target = _a.target, targetElement = _a.targetElement, isBeakVisible = _a.isBeakVisible, beakStyle = _a.beakStyle, children = _a.children, beakWidth = _a.beakWidth;
var positions = this.state.positions;
var beakStyleWidth = beakWidth;
// This is here to support the old way of setting the beak size until version 1.0.0.
// beakStyle is now deprecated and will be be removed at version 1.0.0
if (beakStyle === 'ms-Callout-smallbeak') {
beakStyleWidth = 16;
}
var beakReactStyle = {
top: positions && positions.beakPosition ? positions.beakPosition.top : BEAK_ORIGIN_POSITION.top,
left: positions && positions.beakPosition ? positions.beakPosition.left : BEAK_ORIGIN_POSITION.left,
height: beakStyleWidth,
width: beakStyleWidth
};
var directionalClassName = positions && positions.directionalClassName ? "ms-u-" + positions.directionalClassName : '';
var contentMaxHeight = this._getMaxHeight();
var beakVisible = isBeakVisible && (!!targetElement || !!target);
var content = (React.createElement("div", { ref: this._resolveRef('_hostElement'), className: Utilities_1.css('ms-Callout-container', styles.container) },
React.createElement("div", { className: Utilities_1.css('ms-Callout', styles.root, className, directionalClassName), style: positions ? positions.calloutPosition : OFF_SCREEN_STYLE, ref: this._resolveRef('_calloutElement') },
beakVisible && (React.createElement("div", { className: Utilities_1.css('ms-Callout-beak', styles.beak), style: beakReactStyle })),
beakVisible &&
(React.createElement("div", { className: Utilities_1.css('ms-Callout-beakCurtain', styles.beakCurtain) })),
React.createElement(Popup_1.Popup, { className: Utilities_1.css('ms-Callout-main', styles.main), onDismiss: this.dismiss, shouldRestoreFocus: true, style: { maxHeight: contentMaxHeight } }, children))));
return content;
};
CalloutContent.prototype.dismiss = function (ev) {
var onDismiss = this.props.onDismiss;
if (onDismiss) {
onDismiss(ev);
}
};
CalloutContent.prototype._dismissOnScroll = function (ev) {
var preventDismissOnScroll = this.props.preventDismissOnScroll;
if (this.state.positions && !preventDismissOnScroll) {
this._dismissOnLostFocus(ev);
}
};
CalloutContent.prototype._dismissOnLostFocus = function (ev) {
var target = ev.target;
var clickedOutsideCallout = this._hostElement && !Utilities_1.elementContains(this._hostElement, target);
if ((!this._target && clickedOutsideCallout) ||
ev.target !== this._targetWindow &&
clickedOutsideCallout &&
(this._target.stopPropagation ||
(!this._target || (target !== this._target && !Utilities_1.elementContains(this._target, target))))) {
this.dismiss(ev);
}
};
CalloutContent.prototype._setInitialFocus = function () {
if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
this._didSetInitialFocus = true;
Utilities_1.focusFirstChild(this._calloutElement);
}
};
CalloutContent.prototype._onComponentDidMount = function () {
var _this = this;
// This is added so the callout will dismiss when the window is scrolled
// but not when something inside the callout is scrolled. The delay seems
// to be required to avoid React firing an async focus event in IE from
// the target changing focus quickly prior to rendering the callout.
this._async.setTimeout(function () {
_this._events.on(_this._targetWindow, 'scroll', _this._dismissOnScroll, true);
_this._events.on(_this._targetWindow, 'resize', _this.dismiss, true);
_this._events.on(_this._targetWindow, 'focus', _this._dismissOnLostFocus, true);
_this._events.on(_this._targetWindow, 'click', _this._dismissOnLostFocus, true);
}, 0);
if (this.props.onLayerMounted) {
this.props.onLayerMounted();
}
this._updatePosition();
};
CalloutContent.prototype._updatePosition = function () {
var positions = this.state.positions;
var hostElement = this._hostElement;
var calloutElement = this._calloutElement;
if (hostElement && calloutElement) {
var currentProps = void 0;
currentProps = Utilities_1.assign(currentProps, this.props);
currentProps.bounds = this._getBounds();
// Temporary to be removed when targetElement is removed. Currently deprecated.
if (this.props.targetElement) {
currentProps.targetElement = this._target;
}
else {
currentProps.target = this._target;
}
var newPositions = positioning_1.getRelativePositions(currentProps, hostElement, calloutElement);
// Set the new position only when the positions are not exists or one of the new callout positions are different.
// The position should not change if the position is within 2 decimal places.
if ((!positions && newPositions) ||
(positions && newPositions && !this._arePositionsEqual(positions, newPositions)
&& this._positionAttempts < 5)) {
// We should not reposition the callout more than a few times, if it is then the content is likely resizing
// and we should stop trying to reposition to prevent a stack overflow.
this._positionAttempts++;
this.setState({
positions: newPositions
});
}
else {
this._positionAttempts = 0;
if (this.props.onPositioned) {
this.props.onPositioned();
}
}
}
};
CalloutContent.prototype._getBounds = function () {
if (!this._bounds) {
var currentBounds = this.props.bounds;
if (!currentBounds) {
currentBounds = {
top: 0 + SPACE_FROM_EDGE,
left: 0 + SPACE_FROM_EDGE,
right: this._targetWindow.innerWidth - SPACE_FROM_EDGE,
bottom: this._targetWindow.innerHeight - SPACE_FROM_EDGE,
width: this._targetWindow.innerWidth - SPACE_FROM_EDGE * 2,
height: this._targetWindow.innerHeight - SPACE_FROM_EDGE * 2
};
}
this._bounds = currentBounds;
}
return this._bounds;
};
CalloutContent.prototype._getMaxHeight = function () {
if (!this._maxHeight) {
if (this.props.directionalHintFixed && this._target) {
var beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
var gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
this._maxHeight = positioning_1.getMaxHeight(this._target, this.props.directionalHint, beakWidth + gapSpace, this._getBounds());
}
else {
this._maxHeight = this._getBounds().height - BORDER_WIDTH * 2;
}
}
return this._maxHeight;
};
CalloutContent.prototype._arePositionsEqual = function (positions, newPosition) {
if (positions.calloutPosition.top.toFixed(2) !== newPosition.calloutPosition.top.toFixed(2)) {
return false;
}
if (positions.calloutPosition.left.toFixed(2) !== newPosition.calloutPosition.left.toFixed(2)) {
return false;
}
if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) {
return false;
}
if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) {
return false;
}
return true;
};
CalloutContent.prototype._setTargetWindowAndElement = function (target) {
if (target) {
if (typeof target === 'string') {
var currentDoc = Utilities_1.getDocument();
this._target = currentDoc ? currentDoc.querySelector(target) : null;
this._targetWindow = Utilities_1.getWindow();
}
else if (target.stopPropagation) {
this._target = target;
this._targetWindow = Utilities_1.getWindow(target.toElement);
}
else {
var targetElement = target;
this._target = target;
this._targetWindow = Utilities_1.getWindow(targetElement);
}
}
else {
this._targetWindow = Utilities_1.getWindow();
}
};
return CalloutContent;
}(Utilities_1.BaseComponent));
CalloutContent.defaultProps = {
preventDismissOnScroll: false,
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge
};
__decorate([
Utilities_1.autobind
], CalloutContent.prototype, "dismiss", null);
__decorate([
Utilities_1.autobind
], CalloutContent.prototype, "_setInitialFocus", null);
__decorate([
Utilities_1.autobind
], CalloutContent.prototype, "_onComponentDidMount", null);
exports.CalloutContent = CalloutContent;
});
//# sourceMappingURL=CalloutContent.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "@uifabric/example-app-base", "../CommandBar/examples/data", "./examples/Callout.Basic.Example", "./examples/Callout.Nested.Example", "./examples/Callout.Directional.Example", "./examples/Callout.Cover.Example"], function (require, exports, React, example_app_base_1, data_1, Callout_Basic_Example_1, Callout_Nested_Example_1, Callout_Directional_Example_1, Callout_Cover_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CalloutBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx');
var CalloutNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx');
var CalloutDirectionalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx');
var CalloutCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx');
var CalloutPage = (function (_super) {
__extends(CalloutPage, _super);
function CalloutPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CalloutPage.prototype.render = function () {
var cmdBarParamsTextAndIcons = { items: data_1.textOnlyItems, farItems: null };
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Callout', componentName: 'CalloutExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple callout', code: CalloutBasicExampleCode },
React.createElement(Callout_Basic_Example_1.CalloutBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nested callout... Callout with a commandbar with a sub menu', code: CalloutNestedExampleCode },
React.createElement(Callout_Nested_Example_1.CalloutNestedExample, __assign({}, cmdBarParamsTextAndIcons))),
React.createElement(example_app_base_1.ExampleCard, { title: 'Callout directional example', code: CalloutDirectionalExampleCode },
React.createElement(Callout_Directional_Example_1.CalloutDirectionalExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Callout cover example', code: CalloutCoverExampleCode },
React.createElement(Callout_Cover_Example_1.CalloutCoverExample, null))), propertiesTables: React.createElement("div", null,
React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Callout/Callout.Props.ts')
] }),
React.createElement("p", null,
"Besides the above properties, the ",
React.createElement("code", null, "Callout"),
" component accepts all properties that the React ",
React.createElement("code", null, "button"),
" and ",
React.createElement("code", null, "a"),
" components accept.")), overview: React.createElement("div", null,
React.createElement("p", null, "Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way."),
React.createElement("p", null, "Use a Callout for displaying additional contextual information about an item on the screen. Unlike Tooltips, Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content."),
React.createElement("p", null, "Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the ms-Icon--info \"i\" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Callout/Callout.html' }, "Fabric JS"), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary."),
React.createElement("li", null, "Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best."),
React.createElement("li", null, "Do be helpful with the tip text inside of your Callout."),
React.createElement("li", null, "Do limit the information inside of a Callout to supplemental information that users don't have to read."),
React.createElement("li", null, "Callouts should be placed near the object being described, usually at the pointer's tail or head if possible."),
React.createElement("li", null, "When additional context - or more advanced description - is necessary, consider placing a link to \"Learn more\" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience."),
React.createElement("li", null, "Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming."),
React.createElement("li", null, "Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout."),
React.createElement("li", null, "Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout."),
React.createElement("li", null, "Don\u2019t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration."),
React.createElement("li", null, "Don\u2019t open Callout from within another Callout."),
React.createElement("li", null, "Don\u2019t use Callout to ask the user to confirm an action, use a Dialog instead."),
React.createElement("li", null, "Don\u2019t show Callouts on hidden elements."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return CalloutPage;
}(React.Component));
exports.CalloutPage = CalloutPage;
});
//# sourceMappingURL=CalloutPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Callout", "../../common/DirectionalHint"], function (require, exports, Callout_1, DirectionalHint_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Callout_1); __export(DirectionalHint_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Check.js | 22.22% | (6 / 27) | 22.22% | (4 / 18) | 10% | (1 / 10) | 25% | (6 / 24) | |
| Check.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./Check.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Check = (function (_super) {
__extends(Check, _super);
function Check() {
return _super !== null && _super.apply(this, arguments) || this;
}
Check.prototype.shouldComponentUpdate = function (newProps) {
return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked;
};
Check.prototype.render = function () {
var _a = this.props, isChecked = _a.isChecked, checked = _a.checked;
isChecked = isChecked || checked;
return (React.createElement("div", { className: Utilities_1.css('ms-Check', styles.root, (_b = {},
_b['is-checked ' + styles.rootIsChecked] = isChecked,
_b)) },
React.createElement("div", { className: Utilities_1.css('ms-Icon ms-Check-background', styles.background) }),
React.createElement("i", { className: Utilities_1.css('ms-Check-check ms-Icon ms-Icon--CheckMark', styles.check) })));
var _b;
};
return Check;
}(Utilities_1.BaseComponent));
Check.defaultProps = {
isChecked: false
};
exports.Check = Check;
});
//# sourceMappingURL=Check.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_fad8abeb', rootIsChecked: 'rootIsChecked_fad8abeb', background: 'background_fad8abeb', check: 'check_fad8abeb', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_fad8abeb{line-height:1;width:24px;height:24px;vertical-align:top;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_fad8abeb.rootIsChecked_fad8abeb .background_fad8abeb:before{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_fad8abeb.rootIsChecked_fad8abeb .background_fad8abeb:after{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_fad8abeb.rootIsChecked_fad8abeb .check_fad8abeb{opacity:1;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:900;font-size:12px}.root_fad8abeb:hover .check_fad8abeb{opacity:1}.check_fad8abeb{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";opacity:0}.background_fad8abeb{position:relative;height:24px;width:24px}.background_fad8abeb:before{content:'\\E91F';color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.background_fad8abeb:after{content:'\\EA3A';color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.background_fad8abeb:after,.background_fad8abeb:before{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:24px;height:24px;width:24px;position:absolute}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Check.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Check"], function (require, exports, Check_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Check_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Checkbox.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Checkbox.js | 11.43% | (8 / 70) | 14.49% | (10 / 69) | 6.25% | (1 / 16) | 12.7% | (8 / 63) | |
| Checkbox.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| Checkbox.visualtest.js | 6.67% | (1 / 15) | 100% | (0 / 0) | 0% | (0 / 8) | 7.14% | (1 / 14) | |
| CheckboxPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| CheckboxPage.visualtest.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Checkbox.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./Checkbox.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Checkbox = (function (_super) {
__extends(Checkbox, _super);
function Checkbox(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'checked': 'defaultChecked'
});
_this._id = Utilities_1.getId('checkbox-');
_this.state = {
isFocused: false,
isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
};
return _this;
}
Checkbox.prototype.render = function () {
var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, label = _a.label, name = _a.name;
var isFocused = this.state.isFocused;
var isChecked = checked === undefined ? this.state.isChecked : checked;
return (React.createElement("div", { className: Utilities_1.css('ms-Checkbox', styles.root, className, (_b = {
'is-inFocus': isFocused
},
_b[styles.rootIsInFocus] = isFocused,
_b)) },
React.createElement("input", __assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), id: this._id, name: name || this._id, className: Utilities_1.css('ms-Checkbox-input', styles.input), type: 'checkbox', onChange: this._onChange, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked })),
this.props.children,
React.createElement("label", { htmlFor: this._id, className: Utilities_1.css('ms-Checkbox-label', styles.label, (_c = {},
_c['is-checked ' + styles.labelIsChecked] = isChecked,
_c['is-disabled ' + styles.labelIsDisabled] = disabled,
_c[styles.labelIsInFocus] = isFocused,
_c)) }, label && React.createElement("span", { className: styles.textLabel }, label))));
var _b, _c;
};
Object.defineProperty(Checkbox.prototype, "checked", {
get: function () {
return this._checkBox ? this._checkBox.checked : false;
},
enumerable: true,
configurable: true
});
Checkbox.prototype.focus = function () {
if (this._checkBox) {
this._checkBox.focus();
}
};
Checkbox.prototype._onFocus = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onFocus) {
inputProps.onFocus(ev);
}
this.setState({ isFocused: true });
};
Checkbox.prototype._onBlur = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onBlur) {
inputProps.onBlur(ev);
}
this.setState({ isFocused: false });
};
Checkbox.prototype._onChange = function (ev) {
var onChange = this.props.onChange;
var isChecked = ev.target.checked;
if (onChange) {
onChange(ev, isChecked);
}
if (this.props.checked === undefined) {
this.setState({ isChecked: isChecked });
}
};
return Checkbox;
}(Utilities_1.BaseComponent));
Checkbox.defaultProps = {};
__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onFocus", null);
__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onBlur", null);
__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onChange", null);
exports.Checkbox = Checkbox;
});
//# sourceMappingURL=Checkbox.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_fb7add54', textLabel: 'textLabel_fb7add54', input: 'input_fb7add54', label: 'label_fb7add54', labelIsDisabled: 'labelIsDisabled_fb7add54', labelIsChecked: 'labelIsChecked_fb7add54', labelIsInFocus: 'labelIsInFocus_fb7add54', rootIsInFocus: 'rootIsInFocus_fb7add54', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_fb7add54{box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.textLabel_fb7add54{font-size:14px;padding:0 0 0 26px;display:inline-block;font-size:14px}html[dir=rtl] .textLabel_fb7add54{padding:0 26px 0 0}.input_fb7add54{position:absolute;opacity:0;top:8px}.label_fb7add54::before{content:'';display:inline-block;border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.label_fb7add54::after{content:\"\\E73E\";font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";line-height:20px;width:20px;text-align:center}.label_fb7add54{display:inline-block;cursor:pointer;margin-top:8px;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:20px;min-height:20px;line-height:20px}.label_fb7add54:hover::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54:hover .textLabel_fb7add54{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_fb7add54:focus::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54:focus.labelIsDisabled_fb7add54::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_fb7add54:focus.labelIsChecked_fb7add54::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_fb7add54:active::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54:active .textLabel_fb7add54{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_fb7add54.labelIsChecked_fb7add54::before{border:10px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_fb7add54.labelIsChecked_fb7add54::before{display:none}}.label_fb7add54.labelIsChecked_fb7add54::after{display:block}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_fb7add54.labelIsChecked_fb7add54::after{height:16px;width:16px;line-height:16px}}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsChecked_fb7add54::after{border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsChecked_fb7add54::after{border:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.label_fb7add54.labelIsChecked_fb7add54:focus::before,.label_fb7add54.labelIsChecked_fb7add54:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_fb7add54.labelIsDisabled_fb7add54{cursor:default}.label_fb7add54.labelIsDisabled_fb7add54:focus::before,.label_fb7add54.labelIsDisabled_fb7add54:hover::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_fb7add54.labelIsDisabled_fb7add54::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsDisabled_fb7add54::after{border:2px solid #0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsDisabled_fb7add54::after{border:2px solid #600000}}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsDisabled_fb7add54::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsDisabled_fb7add54::after{color:#600000}}.label_fb7add54.labelIsDisabled_fb7add54 .textLabel_fb7add54{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsDisabled_fb7add54 .textLabel_fb7add54{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsDisabled_fb7add54 .textLabel_fb7add54{color:#600000}}.label_fb7add54.labelIsInFocus_fb7add54::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54.labelIsInFocus_fb7add54.labelIsDisabled_fb7add54::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_fb7add54.labelIsInFocus_fb7add54.labelIsChecked_fb7add54::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.ms-Fabric.is-focusVisible .rootIsInFocus_fb7add54::before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.ms-Fabric.is-focusVisible .rootIsInFocus_fb7add54::before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.ms-Fabric.is-focusVisible .rootIsInFocus_fb7add54::before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Checkbox.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'checkbox'). then(function () { phantomcss.screenshot('.Checkbox', 'Checkbox_not_pressed'); }).then(function () { this.mouse.move('.Checkbox'); phantomcss.screenshot('.Checkbox', 'Checkbox_hovered'); }).then(function () { this.mouse.down('.Checkbox'); phantomcss.screenshot('.Checkbox', 'Checkbox_pressed'); }). then(function () { phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_not_pressed'); }).then(function () { this.mouse.move('.CheckboxDisabled'); phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_hovered'); }).then(function () { this.mouse.down('.CheckboxDisabled'); phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=Checkbox.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Checkbox.Basic.Example"], function (require, exports, React, example_app_base_1, Checkbox_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CheckboxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx');
var CheckboxPage = (function (_super) {
__extends(CheckboxPage, _super);
function CheckboxPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CheckboxPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Checkbox', componentName: 'CheckboxExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Checkboxes', code: CheckboxBasicExampleCode },
React.createElement(Checkbox_Basic_Example_1.CheckboxBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control."),
React.createElement("p", null, "A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected."),
React.createElement("p", null, "Use a single Checkbox for a subordinate setting, such as with a \"Remember me?\" login scenario or with a terms of service agreement."),
React.createElement("p", null, "For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection."),
React.createElement("p", null, "Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Allow users to choose any combination of options when several Checkboxes are grouped together."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use a Checkbox as an on/off control. Instead use a toggle switch."),
React.createElement("li", null, "Don\u2019t use a Checkbox when the user can choose only one option from the group, use radio buttons instead."),
React.createElement("li", null, "Don't put two groups of Checkboxes next to each other. Separate the two groups with labels."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/CheckBox/CheckBox.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return CheckboxPage;
}(React.Component));
exports.CheckboxPage = CheckboxPage;
});
//# sourceMappingURL=CheckboxPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var CheckboxVPage = (function (_super) {
__extends(CheckboxVPage, _super);
function CheckboxVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CheckboxVPage.prototype.render = function () {
return React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.Checkbox, { className: 'Checkbox', label: 'Check Box', defaultChecked: true }),
React.createElement(index_1.Checkbox, { className: 'CheckboxDisabled', label: 'Check Box Disabled', defaultChecked: true, disabled: true }));
};
return CheckboxVPage;
}(React.Component));
exports.default = CheckboxVPage;
});
//# sourceMappingURL=CheckboxPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Checkbox"], function (require, exports, Checkbox_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Checkbox_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ChoiceGroup.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| ChoiceGroup.js | 9.46% | (7 / 74) | 12.28% | (7 / 57) | 5% | (1 / 20) | 10% | (7 / 70) | |
| ChoiceGroup.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| ChoiceGroup.visualtest.js | 5% | (1 / 20) | 100% | (0 / 0) | 0% | (0 / 11) | 5.26% | (1 / 19) | |
| ChoiceGroupPage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| ChoiceGroupPage.visualtest.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=ChoiceGroup.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Image", "../../Label", "../../Icon", "../../Utilities", "./ChoiceGroup.scss"], function (require, exports, React, Image_1, Label_1, Icon_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ChoiceGroup = (function (_super) {
__extends(ChoiceGroup, _super);
function ChoiceGroup(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ 'onChanged': 'onChange' });
_this._warnMutuallyExclusive({
selectedKey: 'defaultSelectedKey'
});
_this.state = {
keyChecked: (props.defaultSelectedKey === undefined) ?
_this._getKeyChecked(props) :
props.defaultSelectedKey,
keyFocused: undefined
};
_this._id = Utilities_1.getId('ChoiceGroup');
_this._labelId = Utilities_1.getId('ChoiceGroupLabel');
return _this;
}
ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
var newKeyChecked = this._getKeyChecked(newProps);
var oldKeyCheched = this._getKeyChecked(this.props);
if (newKeyChecked !== oldKeyCheched) {
this.setState({
keyChecked: newKeyChecked,
});
}
};
ChoiceGroup.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, options = _a.options, className = _a.className, required = _a.required;
var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
return (
// Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role
React.createElement("div", { role: 'application', className: className },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": this.props.label ? this._id + '-label' : '' },
this.props.label && (React.createElement(Label_1.Label, { className: className, required: required, id: this._id + '-label' }, label)),
options.map(function (option) {
return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', styles.choiceField, (_a = {},
_a['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc,
_a['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps,
_a['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused,
_a)) },
React.createElement("input", { ref: function (c) { return _this._inputElement = c; }, id: _this._id + "-" + option.key, className: Utilities_1.css('ms-ChoiceField-input', styles.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.isDisabled || option.disabled || _this.props.disabled, checked: option.key === keyChecked, required: required, onChange: _this._onChange.bind(_this, option), onFocus: _this._onFocus.bind(_this, option), onBlur: _this._onBlur.bind(_this, option), "aria-labelledby": _this._labelId + "-" + option.key }),
_this._renderField(option)));
var _a;
}))));
};
ChoiceGroup.prototype.focus = function () {
if (this._inputElement) {
this._inputElement.focus();
}
};
ChoiceGroup.prototype._onFocus = function (option, ev) {
this.setState({
keyFocused: option.key,
keyChecked: this.state.keyChecked
});
};
ChoiceGroup.prototype._onBlur = function (option, ev) {
this.setState({
keyFocused: undefined,
keyChecked: this.state.keyChecked
});
};
ChoiceGroup.prototype._renderField = function (option) {
var keyChecked = this.state.keyChecked;
var isDisabled = option.isDisabled || option.disabled || this.props.disabled;
return (React.createElement("label", { htmlFor: this._id + '-' + option.key, className: Utilities_1.css('ms-ChoiceField-field', styles.field, (_a = {},
_a['ms-ChoiceField-field--image ' + styles.fieldIsImage] = !!option.imageSrc,
_a['ms-ChoiceField--icon ' + styles.fieldIsIcon] = !!option.iconProps,
_a['is-checked ' + styles.fieldIsChecked] = option.key === keyChecked,
_a['is-disabled ' + styles.fieldIsDisabled] = isDisabled,
_a)) },
option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {},
_b['is-hidden ' + styles.imageWrapperIsHidden] = option.key === keyChecked,
_b)) },
React.createElement(Image_1.Image, { src: option.imageSrc, width: option.imageSize.width, height: option.imageSize.height })),
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {},
_c['is-hidden ' + styles.imageWrapperIsHidden] = option.key !== keyChecked,
_c)) },
React.createElement(Image_1.Image, { src: option.selectedImageSrc, width: option.imageSize.width, height: option.imageSize.height })))),
option.iconProps
? React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', styles.iconWrapper) },
React.createElement(Icon_1.Icon, __assign({}, option.iconProps))))
: null,
option.imageSrc || option.iconProps
? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', styles.labelWrapper) },
React.createElement("span", { id: this._labelId + "-" + option.key, className: 'ms-Label' }, option.text))) : (React.createElement("span", { id: this._labelId + "-" + option.key, className: 'ms-Label' }, option.text))));
var _a, _b, _c;
};
ChoiceGroup.prototype._onChange = function (option, evt) {
var _a = this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey;
// Only manage state in uncontrolled scenarios.
if (selectedKey === undefined) {
this.setState({
keyChecked: option.key
});
}
// TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
if (onChange) {
onChange(evt, option);
}
else if (onChanged) {
onChanged(option);
}
};
/**
* If all the isChecked property of options are falsy values, return undefined;
* Else return the key of the first option with the truthy isChecked property.
*/
ChoiceGroup.prototype._getKeyChecked = function (props) {
if (props.selectedKey !== undefined) {
return props.selectedKey;
}
var optionsChecked = props.options.filter(function (option) {
return option.isChecked || option.checked;
});
if (optionsChecked.length === 0) {
return undefined;
}
else {
return optionsChecked[0].key;
}
};
return ChoiceGroup;
}(Utilities_1.BaseComponent));
ChoiceGroup.defaultProps = {
options: []
};
exports.ChoiceGroup = ChoiceGroup;
});
//# sourceMappingURL=ChoiceGroup.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_c86c558d', choiceField: 'choiceField_c86c558d', input: 'input_c86c558d', field: 'field_c86c558d', fieldIsDisabled: 'fieldIsDisabled_c86c558d', fieldIsChecked: 'fieldIsChecked_c86c558d', choiceFieldIsInFocus: 'choiceFieldIsInFocus_c86c558d', choiceFieldIsImage: 'choiceFieldIsImage_c86c558d', choiceFieldIsIcon: 'choiceFieldIsIcon_c86c558d', fieldIsImage: 'fieldIsImage_c86c558d', fieldIsIcon: 'fieldIsIcon_c86c558d', innerField: 'innerField_c86c558d', imageWrapper: 'imageWrapper_c86c558d', imageWrapperIsHidden: 'imageWrapperIsHidden_c86c558d', labelWrapper: 'labelWrapper_c86c558d', iconWrapper: 'iconWrapper_c86c558d', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_c86c558d{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.choiceField_c86c558d{box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;font-size:14px;font-weight:400;min-height:36px;border:none;position:relative}html[dir=ltr] .choiceField_c86c558d{padding-left:8px}html[dir=rtl] .choiceField_c86c558d{padding-right:8px}.choiceField_c86c558d .ms-Label{font-size:14px;padding:0 0 0 26px;display:inline-block}html[dir=rtl] .choiceField_c86c558d .ms-Label{padding:0 26px 0 0}.input_c86c558d{position:absolute;opacity:0;top:8px}.field_c86c558d::before{content:'';display:inline-block;border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.field_c86c558d::after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:10px;bottom:0;transition-property:top,left,right,width,height;transition-duration:150ms;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}html[dir=ltr] .field_c86c558d::after{left:10px}html[dir=rtl] .field_c86c558d::after{right:10px}html[dir=ltr] .field_c86c558d::after{right:0}html[dir=rtl] .field_c86c558d::after{left:0}@media screen and (-ms-high-contrast:active){.field_c86c558d::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d::after{color:#600000}}.field_c86c558d{display:inline-block;cursor:pointer;margin-top:8px;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.field_c86c558d:hover::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d:hover .ms-Label{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.field_c86c558d:focus::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d:focus.fieldIsDisabled_c86c558d::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_c86c558d:focus.fieldIsChecked_c86c558d::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.field_c86c558d:active::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d:active .ms-Label{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.field_c86c558d.fieldIsChecked_c86c558d::before{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background-color:transparent}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsChecked_c86c558d::before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsChecked_c86c558d::before{border-color:#37006e}}.field_c86c558d.fieldIsChecked_c86c558d::after{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";top:5px;width:10px;height:10px}html[dir=ltr] .field_c86c558d.fieldIsChecked_c86c558d::after{left:5px}html[dir=rtl] .field_c86c558d.fieldIsChecked_c86c558d::after{right:5px}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsChecked_c86c558d::after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsChecked_c86c558d::after{background-color:#37006e}}.field_c86c558d.fieldIsChecked_c86c558d:focus::before,.field_c86c558d.fieldIsChecked_c86c558d:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.field_c86c558d.fieldIsDisabled_c86c558d{cursor:default}.field_c86c558d.fieldIsDisabled_c86c558d:focus::before,.field_c86c558d.fieldIsDisabled_c86c558d:hover::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_c86c558d.fieldIsDisabled_c86c558d::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsDisabled_c86c558d::before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsDisabled_c86c558d::before{border-color:#600000}}.field_c86c558d.fieldIsDisabled_c86c558d .ms-Label{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsDisabled_c86c558d .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsDisabled_c86c558d .ms-Label{color:#600000}}.field_c86c558d.choiceFieldIsInFocus_c86c558d::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d.choiceFieldIsInFocus_c86c558d.fieldIsDisabled_c86c558d::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_c86c558d.choiceFieldIsInFocus_c86c558d.fieldIsChecked_c86c558d::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.choiceFieldIsIcon_c86c558d,.choiceFieldIsImage_c86c558d{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:0;margin:0 4px 4px 0;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}html[dir=rtl] .choiceFieldIsIcon_c86c558d,html[dir=rtl] .choiceFieldIsImage_c86c558d{margin:0 0 4px 4px}html[dir=ltr] .choiceFieldIsIcon_c86c558d,html[dir=ltr] .choiceFieldIsImage_c86c558d{padding-left:0}html[dir=rtl] .choiceFieldIsIcon_c86c558d,html[dir=rtl] .choiceFieldIsImage_c86c558d{padding-right:0}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d{display:inline-block;box-sizing:border-box;min-width:96px;cursor:pointer;padding:4px;padding-top:22px;margin:0;text-align:center;transition:all .2s ease;border:2px solid transparent}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d{cursor:default}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d{opacity:.25}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d{position:relative;padding:0 28px}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d{padding-bottom:2px;transition:opacity .2s ease}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image{display:inline-block}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d{display:inline-block;position:relative;margin:4px 0 0 0;height:32px;line-height:16px;overflow-y:hidden;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d .ms-Label,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d .ms-Label,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d .ms-Label,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d .ms-Label{padding:0}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{top:3px;opacity:0}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{right:3px}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{left:3px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{left:auto}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{right:auto}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{top:13px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{right:13px}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{left:13px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{left:auto}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{right:auto}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before{opacity:1}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before{opacity:1}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after{top:8px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after{right:8px}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after{left:8px}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover{border-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before{border-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_c86c558d{height:96px;width:96px}.choiceFieldIsIcon_c86c558d .iconWrapper_c86c558d{font-size:32px;line-height:32px;height:32px}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsIcon_c86c558d::-moz-focus-inner,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsImage_c86c558d::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsIcon_c86c558d,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsImage_c86c558d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsIcon_c86c558d:focus:after,.ms-Fabric.is-focusVisible .ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsImage_c86c558d:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ChoiceGroup.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'choiceGroup'). then(function () { phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_not_pressed'); }).then(function () { this.mouse.move('.ChoiceGroup'); phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_hovered'); }).then(function () { this.mouse.down('.ChoiceGroup'); phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_pressed'); }). then(function () { phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_not_pressed'); }).then(function () { this.mouse.move('.ChoiceGroupIcon'); phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_hovered'); }).then(function () { this.mouse.down('.ChoiceGroupIcon'); phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_pressed'); }).then(function () { phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_not_pressed'); }).then(function () { this.mouse.move('.ChoiceGroupDisabled'); phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_hovered'); }).then(function () { this.mouse.down('.ChoiceGroupDisabled'); phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=ChoiceGroup.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/ChoiceGroup.Basic.Example", "./examples/ChoiceGroup.Image.Example", "./examples/ChoiceGroup.Icon.Example"], function (require, exports, React, example_app_base_1, ChoiceGroup_Basic_Example_1, ChoiceGroup_Image_Example_1, ChoiceGroup_Icon_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ChoiceGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx');
var ChoiceGroupImageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx');
var ChoiceGroupIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx');
var ChoiceGroupPage = (function (_super) {
__extends(ChoiceGroupPage, _super);
function ChoiceGroupPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChoiceGroupPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ChoiceGroup', componentName: 'ChoiceGroupExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups', code: ChoiceGroupBasicExampleCode },
React.createElement(ChoiceGroup_Basic_Example_1.ChoiceGroupBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups using Images', code: ChoiceGroupImageExampleCode },
React.createElement(ChoiceGroup_Image_Example_1.ChoiceGroupImageExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups using Icons', code: ChoiceGroupIconExampleCode },
React.createElement(ChoiceGroup_Icon_Example_1.ChoiceGroupIconExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group."),
React.createElement("p", null, "ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead."),
React.createElement("p", null, "If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for \"I agree\" instead of ChoiceGroup buttons for \"I agree\" and \"I don't agree.\"")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list. "),
React.createElement("li", null, "Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable."),
React.createElement("li", null, "List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable."),
React.createElement("li", null, "If none of the options is a valid choice, add another option to reflect this choice, such as \"None\" or \"Does not apply\"."),
React.createElement("li", null, "Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option."),
React.createElement("li", null, "Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead."),
React.createElement("li", null, "Use if there are more than 7 options, use a Dropdown instead."),
React.createElement("li", null, "Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/ChoiceFieldGroup/ChoiceFieldGroup.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ChoiceGroupPage;
}(React.Component));
exports.ChoiceGroupPage = ChoiceGroupPage;
});
//# sourceMappingURL=ChoiceGroupPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var ChoiceGroupVPage = (function (_super) {
__extends(ChoiceGroupVPage, _super);
function ChoiceGroupVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChoiceGroupVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.ChoiceGroup, { label: 'Choice Group', className: 'ChoiceGroup', defaultSelectedKey: 'bar', options: [{
key: 'bar',
text: 'Bar chart'
}, {
key: 'pie',
text: 'Pie chart'
}
] })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.ChoiceGroup, { label: 'Choice Group Icon', className: 'ChoiceGroupIcon', defaultSelectedKey: 'day', options: [{
key: 'day',
iconProps: { iconName: 'CalendarDay' },
text: 'Day'
}, {
key: 'week',
iconProps: { iconName: 'CalendarWeek' },
text: 'Week'
}] })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.ChoiceGroup, { label: 'Choice Group Disabled', className: 'ChoiceGroupDisabled', defaultSelectedKey: 'bar', disabled: true, options: [{
key: 'bar',
text: 'Bar chart'
}, {
key: 'pie',
text: 'Pie chart'
}
] })));
};
return ChoiceGroupVPage;
}(React.Component));
exports.default = ChoiceGroupVPage;
});
//# sourceMappingURL=ChoiceGroupPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./ChoiceGroup"], function (require, exports, ChoiceGroup_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(ChoiceGroup_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ColorPicker.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| ColorPicker.js | 11.29% | (7 / 62) | 14.89% | (7 / 47) | 4.35% | (1 / 23) | 12.5% | (7 / 56) | |
| ColorPicker.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| ColorPickerPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| ColorRectangle.js | 11.11% | (7 / 63) | 17.95% | (7 / 39) | 6.67% | (1 / 15) | 12.28% | (7 / 57) | |
| ColorSlider.js | 11.86% | (7 / 59) | 17.07% | (7 / 41) | 7.14% | (1 / 14) | 13.21% | (7 / 53) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=ColorPicker.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../TextField", "./ColorRectangle", "./ColorSlider", "../../utilities/color/colors", "./ColorPicker.scss"], function (require, exports, React, Utilities_1, TextField_1, ColorRectangle_1, ColorSlider_1, colors_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ColorPicker = (function (_super) {
__extends(ColorPicker, _super);
function ColorPicker(props) {
var _this = _super.call(this, props) || this;
_this.state = {
color: colors_1.getColorFromString(props.color)
};
return _this;
}
ColorPicker.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.color) {
this._updateColor(colors_1.getColorFromString(newProps.color));
}
};
ColorPicker.prototype.render = function () {
var _this = this;
var color = this.state.color;
return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', styles.root) },
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', styles.panel) },
React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
!this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', styles.colorSliderIsAlpha), overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChanged: this._onAChanged })),
React.createElement("table", { className: 'ms-ColorPicker-table', cellPadding: '0', cellSpacing: '0' },
React.createElement("thead", null,
React.createElement("tr", { className: 'ms-font-s' },
React.createElement("td", null, "Hex"),
React.createElement("td", null, "Red"),
React.createElement("td", null, "Green"),
React.createElement("td", null, "Blue"),
!this.props.alphaSliderHidden && (React.createElement("td", null, "Alpha")))),
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", null,
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return _this.rText = ref; } })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return _this.gText = ref; } })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return _this.bText = ref; } })),
!this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; } })))))))));
};
ColorPicker.prototype._onSVChanged = function (s, v) {
this._updateColor(colors_1.updateSV(this.state.color, s, v));
};
ColorPicker.prototype._onHChanged = function (h) {
this._updateColor(colors_1.updateH(this.state.color, h));
};
ColorPicker.prototype._onAChanged = function (a) {
this._updateColor(colors_1.updateA(this.state.color, a));
};
ColorPicker.prototype._onHexChanged = function () {
this._updateColor(colors_1.getColorFromString('#' + this.hexText.value));
};
ColorPicker.prototype._onRGBAChanged = function () {
this._updateColor(colors_1.getColorFromRGBA({
r: Number(this.rText.value),
g: Number(this.gText.value),
b: Number(this.bText.value),
a: Number(this.aText.value)
}));
};
ColorPicker.prototype._updateColor = function (newColor) {
var onColorChanged = this.props.onColorChanged;
if (newColor.str !== this.state.color.str) {
this.setState({
color: newColor
}, function () {
if (onColorChanged) {
onColorChanged(newColor.str);
}
});
}
};
return ColorPicker;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onSVChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onHChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onAChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onHexChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onRGBAChanged", null);
exports.ColorPicker = ColorPicker;
});
//# sourceMappingURL=ColorPicker.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_f2c456e1', panel: 'panel_f2c456e1', colorRect: 'colorRect_f2c456e1', rectContainer: 'rectContainer_f2c456e1', capture: 'capture_f2c456e1', rectContainerIsAdjusting: 'rectContainerIsAdjusting_f2c456e1', thumb: 'thumb_f2c456e1', thumbIsSlider: 'thumbIsSlider_f2c456e1', light: 'light_f2c456e1', dark: 'dark_f2c456e1', slider: 'slider_f2c456e1', colorSliderIsHue: 'colorSliderIsHue_f2c456e1', colorSliderIsAlpha: 'colorSliderIsAlpha_f2c456e1', sliderOverlay: 'sliderOverlay_f2c456e1', input: 'input_f2c456e1', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_f2c456e1{position:relative;max-width:300px}.panel_f2c456e1{padding:16px}.colorRect_f2c456e1{position:relative;margin-bottom:10px}.rectContainer_f2c456e1{position:relative}.capture_f2c456e1{position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(255,0,0,.1)}.rectContainer_f2c456e1.rectContainerIsAdjusting_f2c456e1 .capture_f2c456e1{position:fixed}.thumb_f2c456e1{position:absolute;width:20px;height:20px;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 15px -5px #000;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.thumb_f2c456e1.thumbIsSlider_f2c456e1{top:50%}.light_f2c456e1{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to right,#fff 0,transparent 100%)}.dark_f2c456e1{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to bottom,transparent 0,#000 100%)}.slider_f2c456e1{position:relative;height:20px;margin-bottom:5px;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}.slider_f2c456e1.colorSliderIsHue_f2c456e1{background:linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%)}.slider_f2c456e1.colorSliderIsAlpha_f2c456e1{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.sliderOverlay_f2c456e1{content:'';position:absolute;left:0;right:0;top:0;bottom:0}.input_f2c456e1{width:100%;border:none;box-sizing:border-box;height:30px}.input_f2c456e1.ms-TextField{padding-right:2px}.input_f2c456e1 .input_f2c456e1.ms-TextField-field{min-width:auto;padding:5px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ColorPicker.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/ColorPicker.Basic.Example"], function (require, exports, React, example_app_base_1, ColorPicker_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ColorPickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx');
var ColorPickerPage = (function (_super) {
__extends(ColorPickerPage, _super);
function ColorPickerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ColorPickerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ColorPicker', componentName: 'ColorPickerExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'ColorPicker', code: ColorPickerBasicExampleCode },
React.createElement(ColorPicker_Basic_Example_1.ColorPickerBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/ColorPicker.Props.ts')
] }), overview: React.createElement("div", null, "ColorPicker is used to allow a user to select a color"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ColorPickerPage;
}(React.Component));
exports.ColorPickerPage = ColorPickerPage;
});
//# sourceMappingURL=ColorPickerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../utilities/color/colors", "./ColorPicker.scss"], function (require, exports, React, Utilities_1, colors_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ColorRectangle = (function (_super) {
__extends(ColorRectangle, _super);
function ColorRectangle(props) {
var _this = _super.call(this, props) || this;
var color = _this.props.color;
_this.state = {
isAdjusting: false,
origin: null,
color: color,
fullColorString: colors_1.getFullColorString(color)
};
return _this;
}
ColorRectangle.prototype.componentWillUnmount = function () {
this._events.dispose();
};
ColorRectangle.prototype.componentWillReceiveProps = function (newProps) {
var color = newProps.color;
this.setState({
color: color,
fullColorString: colors_1.getFullColorString(color)
});
};
ColorRectangle.prototype.render = function () {
var minSize = this.props.minSize;
var _a = this.state, color = _a.color, fullColorString = _a.fullColorString;
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-colorRect', styles.colorRect), style: { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString }, onMouseDown: this._onMouseDown },
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-light', styles.light) }),
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-dark', styles.dark) }),
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb', styles.thumb), style: { left: color.s + '%', top: (colors_1.MAX_COLOR_VALUE - color.v) + '%', backgroundColor: color.str } })));
};
ColorRectangle.prototype._onMouseDown = function (ev) {
this._events.on(window, 'mousemove', this._onMouseMove, true);
this._events.on(window, 'mouseup', this._onMouseUp, true);
this._onMouseMove(ev);
};
ColorRectangle.prototype._onMouseMove = function (ev) {
var _a = this.props, color = _a.color, onSVChanged = _a.onSVChanged;
var rectSize = this.refs.root.getBoundingClientRect();
var sPercentage = (ev.clientX - rectSize.left) / rectSize.width;
var vPercentage = (ev.clientY - rectSize.top) / rectSize.height;
var newColor = Utilities_1.assign({}, color, {
s: Math.min(colors_1.MAX_COLOR_SATURATION, Math.max(0, sPercentage * colors_1.MAX_COLOR_SATURATION)),
v: Math.min(colors_1.MAX_COLOR_VALUE, Math.max(0, colors_1.MAX_COLOR_VALUE - (vPercentage * colors_1.MAX_COLOR_VALUE))),
});
newColor.hex = colors_1.hsv2hex(newColor.h, newColor.s, newColor.v);
newColor.str = newColor.a === 100 ? '#' + newColor.hex : "rgba(" + newColor.r + ", " + newColor.g + ", " + newColor.b + ", " + newColor.a / 100 + ")";
this.setState({
isAdjusting: true,
color: newColor
});
if (onSVChanged) {
onSVChanged(newColor.s, newColor.v);
}
ev.preventDefault();
ev.stopPropagation();
};
ColorRectangle.prototype._onMouseUp = function (ev) {
this._events.off();
this.setState({
isAdjusting: false,
origin: null
});
};
return ColorRectangle;
}(Utilities_1.BaseComponent));
ColorRectangle.defaultProps = {
minSize: 220
};
__decorate([
Utilities_1.autobind
], ColorRectangle.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], ColorRectangle.prototype, "_onMouseMove", null);
__decorate([
Utilities_1.autobind
], ColorRectangle.prototype, "_onMouseUp", null);
exports.ColorRectangle = ColorRectangle;
});
//# sourceMappingURL=ColorRectangle.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./ColorPicker.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ColorSlider = (function (_super) {
__extends(ColorSlider, _super);
function ColorSlider(props) {
var _this = _super.call(this, props) || this;
var value = _this.props.value;
_this.state = {
isAdjusting: false,
origin: null,
currentValue: value
};
return _this;
}
ColorSlider.prototype.componentWillReceiveProps = function (newProps) {
if (newProps && newProps.value) {
this.setState({ currentValue: newProps.value });
}
};
ColorSlider.prototype.render = function () {
var _a = this.props, className = _a.className, minValue = _a.minValue, maxValue = _a.maxValue, overlayStyle = _a.overlayStyle;
var _b = this.state, currentValue = _b.currentValue, isAdjusting = _b.isAdjusting;
var currentPercentage = 100 * (currentValue - minValue) / (maxValue - minValue);
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-slider', styles.slider, className, {
'is-adjusting': isAdjusting
}), onMouseDown: this._onMouseDown },
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-sliderOverlay', styles.sliderOverlay), style: overlayStyle }),
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb is-slider', styles.thumb, styles.thumbIsSlider), style: { left: currentPercentage + '%' } })));
};
ColorSlider.prototype._onMouseDown = function (ev) {
this._events.on(window, 'mousemove', this._onMouseMove, true);
this._events.on(window, 'mouseup', this._onMouseUp, true);
this._onMouseMove(ev);
};
ColorSlider.prototype._onMouseMove = function (ev) {
var _a = this.props, onChanged = _a.onChanged, minValue = _a.minValue, maxValue = _a.maxValue;
var rectSize = this.refs.root.getBoundingClientRect();
var currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
var newValue = Math.min(maxValue, Math.max(minValue, currentPercentage * maxValue));
this.setState({
isAdjusting: true,
currentValue: newValue
});
if (onChanged) {
onChanged(newValue);
}
ev.preventDefault();
ev.stopPropagation();
};
ColorSlider.prototype._onMouseUp = function (ev) {
this._events.off();
this.setState({
isAdjusting: false,
origin: null
});
};
return ColorSlider;
}(Utilities_1.BaseComponent));
ColorSlider.defaultProps = {
minValue: 0,
maxValue: 100,
thumbColor: 'inherit',
value: 0
};
__decorate([
Utilities_1.autobind
], ColorSlider.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], ColorSlider.prototype, "_onMouseMove", null);
__decorate([
Utilities_1.autobind
], ColorSlider.prototype, "_onMouseUp", null);
exports.ColorSlider = ColorSlider;
});
//# sourceMappingURL=ColorSlider.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./ColorPicker"], function (require, exports, ColorPicker_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(ColorPicker_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| CommandBar.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| CommandBar.js | 5.1% | (8 / 157) | 6.62% | (10 / 151) | 3.33% | (1 / 30) | 5.41% | (8 / 148) | |
| CommandBar.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| CommandBarPage.js | 22.58% | (7 / 31) | 35% | (7 / 20) | 10% | (1 / 10) | 25.93% | (7 / 27) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=CommandBar.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../ContextualMenu", "../../common/DirectionalHint", "../../Icon", "./CommandBar.scss"], function (require, exports, React, Utilities_1, FocusZone_1, ContextualMenu_1, DirectionalHint_1, Icon_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var OVERFLOW_KEY = 'overflow';
var OVERFLOW_WIDTH = 41.5;
var CommandBar = (function (_super) {
__extends(CommandBar, _super);
function CommandBar(props) {
var _this = _super.call(this, props) || this;
_this.state = _this._getStateFromProps(props);
_this._id = Utilities_1.getId('CommandBar');
return _this;
}
CommandBar.prototype.componentDidMount = function () {
this._updateItemMeasurements();
this._updateRenderedItems();
this._events.on(window, 'resize', this._updateRenderedItems);
};
CommandBar.prototype.componentWillReceiveProps = function (nextProps) {
this.setState(this._getStateFromProps(nextProps));
this._commandItemWidths = null;
};
CommandBar.prototype.componentDidUpdate = function (prevProps, prevStates) {
if (!this._commandItemWidths) {
this._updateItemMeasurements();
this._updateRenderedItems();
}
};
CommandBar.prototype.render = function () {
var _this = this;
var _a = this.props, isSearchBoxVisible = _a.isSearchBoxVisible, searchPlaceholderText = _a.searchPlaceholderText, className = _a.className;
var _b = this.state, renderedItems = _b.renderedItems, contextualMenuProps = _b.contextualMenuProps, expandedMenuItemKey = _b.expandedMenuItemKey, expandedMenuId = _b.expandedMenuId, renderedOverflowItems = _b.renderedOverflowItems, contextualMenuTarget = _b.contextualMenuTarget, renderedFarItems = _b.renderedFarItems;
var searchBox;
if (isSearchBoxVisible) {
searchBox = (React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch', styles.search), ref: 'searchSurface' },
React.createElement("input", { className: Utilities_1.css('ms-CommandBarSearch-input', styles.searchInput), type: 'text', placeholder: searchPlaceholderText }),
React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper', styles.searchIconWrapper, styles.searchIconSearchWrapper) },
React.createElement("i", { className: Utilities_1.css('ms-Icon ms-Icon--Search') })),
React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s', styles.searchIconWrapper, styles.searchIconClearWrapper) },
React.createElement("i", { className: Utilities_1.css('ms-Icon ms-Icon--Cancel') }))));
}
return (React.createElement("div", { className: Utilities_1.css('ms-CommandBar', styles.root, className), ref: 'commandBarRegion' },
searchBox,
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal, role: 'menubar' },
React.createElement("div", { className: Utilities_1.css('ms-CommandBar-primaryCommands', styles.primaryCommands), ref: 'commandSurface' }, renderedItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey)); }).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
React.createElement("button", { type: 'button', id: this._id + OVERFLOW_KEY, className: Utilities_1.css('ms-CommandBarItem-link', styles.itemLink, (_c = {},
_c['is-expanded ' + styles.itemLinkIsExpanded] = (expandedMenuItemKey === OVERFLOW_KEY),
_c)), onClick: this._onOverflowClick, role: 'menuitem', "aria-label": this.props.elipisisAriaLabel || '', "aria-haspopup": true, "data-automation-id": 'commandBarOverflow' },
React.createElement("i", { className: Utilities_1.css('ms-CommandBarItem-overflow ms-Icon ms-Icon--More', styles.itemOverflow) })))
] : [])),
React.createElement("div", { className: Utilities_1.css('ms-CommandBar-sideCommands', styles.sideCommands), ref: 'farCommandSurface' }, renderedFarItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey, true)); }))),
(contextualMenuProps) ?
(React.createElement(ContextualMenu_1.ContextualMenu, __assign({ className: Utilities_1.css('ms-CommandBar-menuHost'), isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge }, contextualMenuProps, { targetElement: contextualMenuTarget, labelElementId: expandedMenuId, onDismiss: this._onContextMenuDismiss }))) : (null)));
var _c;
};
CommandBar.prototype.focus = function () {
this.refs.focusZone.focus();
};
CommandBar.prototype._renderItemInCommandBar = function (item, index, expandedMenuItemKey, isFarItem) {
var _this = this;
var itemKey = item.key || String(index);
var isLink = item.onClick || ContextualMenu_1.hasSubmenuItems(item);
var className = Utilities_1.css(isLink ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText), !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName), (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded));
var hasIcon = !!item.icon || !!item.iconProps;
return React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item, item.className), key: itemKey, ref: itemKey }, (function () {
if (isLink) {
return React.createElement("button", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), { id: _this._id + item.key, className: className, onClick: function (ev) { return _this._onItemClick(ev, item); }, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }),
(hasIcon) ? _this._renderIcon(item) : (null),
(!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)),
ContextualMenu_1.hasSubmenuItems(item) ? (React.createElement("i", { className: Utilities_1.css('ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown', styles.itemChevronDown) })) : (null));
}
else if (item.href) {
return React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { id: _this._id + item.key, className: className, href: item.href, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }),
(hasIcon) ? _this._renderIcon(item) : (null),
(!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)));
}
else {
return React.createElement("div", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.divProperties), { id: _this._id + item.key, className: className, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item) }),
(hasIcon) ? _this._renderIcon(item) : (null),
React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular', styles.itemCommandText), "aria-hidden": 'true', role: 'presentation' }, item.name));
}
})());
};
CommandBar.prototype._renderIcon = function (item) {
// Only present to allow continued use of item.icon which is deprecated.
var iconProps = item.iconProps ? item.iconProps : {
iconName: item.icon
};
// Use the default icon color for the known icon names
var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
var iconClassName = Utilities_1.css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName }));
};
CommandBar.prototype._updateItemMeasurements = function () {
// the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5
if (this.refs[OVERFLOW_KEY] || (this.props.overflowItems && this.props.overflowItems.length)) {
this._overflowWidth = OVERFLOW_WIDTH;
}
else {
this._overflowWidth = 0;
}
if (!this._commandItemWidths) {
this._commandItemWidths = {};
}
for (var i = 0; i < this.props.items.length; i++) {
var item = this.props.items[i];
if (!this._commandItemWidths[item.key]) {
var el = this.refs[item.key];
if (el) {
this._commandItemWidths[item.key] = el.getBoundingClientRect().width;
}
}
}
};
CommandBar.prototype._updateRenderedItems = function () {
var _a = this.props, items = _a.items, overflowItems = _a.overflowItems;
var commandSurface = this.refs.commandSurface;
var farCommandSurface = this.refs.farCommandSurface;
var commandBarRegion = this.refs.commandBarRegion;
var searchSurface = this.refs.searchSurface;
var renderedItems = [].concat(items);
var renderedOverflowItems = overflowItems;
var consumedWidth = 0;
var isOverflowVisible = overflowItems && overflowItems.length;
var style = window.getComputedStyle(commandSurface);
var availableWidth = commandBarRegion.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
if (searchSurface) {
availableWidth -= searchSurface.getBoundingClientRect().width;
}
if (farCommandSurface) {
availableWidth -= farCommandSurface.getBoundingClientRect().width;
}
if (isOverflowVisible) {
availableWidth -= this._overflowWidth;
}
for (var i = 0; i < renderedItems.length; i++) {
var item = renderedItems[i];
var itemWidth = this._commandItemWidths[item.key];
if ((consumedWidth + itemWidth) >= availableWidth) {
if (i > 0 && !isOverflowVisible && (availableWidth - consumedWidth) < OVERFLOW_WIDTH) {
i--;
}
renderedOverflowItems = renderedItems.splice(i).concat(overflowItems);
break;
}
else {
consumedWidth += itemWidth;
}
}
var renderedContextualMenuProps = this._getContextualMenuPropsAfterUpdate(renderedItems.concat(this.state.renderedFarItems), renderedOverflowItems);
this.setState({
renderedItems: renderedItems,
renderedOverflowItems: renderedOverflowItems,
expandedMenuItemKey: renderedContextualMenuProps ? this.state.expandedMenuItemKey : null,
contextualMenuProps: renderedContextualMenuProps,
contextualMenuTarget: renderedContextualMenuProps ? this.state.contextualMenuTarget : null
});
};
CommandBar.prototype._onItemClick = function (ev, item) {
if (item.key === this.state.expandedMenuItemKey || !ContextualMenu_1.hasSubmenuItems(item)) {
this._onContextMenuDismiss();
}
else {
this.setState({
expandedMenuId: ev.currentTarget.id,
expandedMenuItemKey: item.key,
contextualMenuProps: this._getContextualMenuPropsFromItem(item),
contextualMenuTarget: ev.currentTarget
});
}
if (item.onClick) {
item.onClick(ev, item);
}
};
CommandBar.prototype._onOverflowClick = function (ev) {
if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
this._onContextMenuDismiss();
}
else {
this.setState({
expandedMenuId: ev.currentTarget.id,
expandedMenuItemKey: OVERFLOW_KEY,
contextualMenuProps: { items: this.state.renderedOverflowItems },
contextualMenuTarget: ev.currentTarget
});
}
};
CommandBar.prototype._onContextMenuDismiss = function (ev) {
if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget)) {
var contextualMenuProps = this.state.contextualMenuProps;
if (contextualMenuProps && contextualMenuProps.onDismiss) {
this.state.contextualMenuProps.onDismiss(ev);
}
this.setState({
expandedMenuItemKey: null,
contextualMenuProps: null,
contextualMenuTarget: null
});
}
else {
ev.stopPropagation();
ev.preventDefault();
}
};
CommandBar.prototype._getStateFromProps = function (nextProps) {
return {
renderedItems: nextProps.items || [],
renderedOverflowItems: null,
contextualMenuProps: this._getContextualMenuPropsAfterUpdate(nextProps.items.concat(nextProps.farItems), nextProps.overflowItems),
renderedFarItems: nextProps.farItems || null
};
};
CommandBar.prototype._getContextualMenuPropsAfterUpdate = function (renderedItems, overflowItems) {
var _this = this;
if (this.state && this.state.expandedMenuItemKey) {
if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
// Keep the overflow menu open
return { items: overflowItems };
}
else {
// Find the currently open key in the new props
var matchingItem = renderedItems.filter(function (item) { return item.key === _this.state.expandedMenuItemKey; });
if (matchingItem.length === 1) {
return this._getContextualMenuPropsFromItem(matchingItem[0]);
}
}
}
return null;
};
CommandBar.prototype._getContextualMenuPropsFromItem = function (item) {
return item.subMenuProps || (item.items && { items: item.items });
};
return CommandBar;
}(Utilities_1.BaseComponent));
CommandBar.defaultProps = {
items: [],
overflowItems: [],
farItems: []
};
__decorate([
Utilities_1.autobind
], CommandBar.prototype, "_onOverflowClick", null);
__decorate([
Utilities_1.autobind
], CommandBar.prototype, "_onContextMenuDismiss", null);
exports.CommandBar = CommandBar;
});
//# sourceMappingURL=CommandBar.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_6ec53214', primaryCommands: 'primaryCommands_6ec53214', sideCommands: 'sideCommands_6ec53214', item: 'item_6ec53214', itemChevronDown: 'itemChevronDown_6ec53214', itemCommandText: 'itemCommandText_6ec53214', itemText: 'itemText_6ec53214', itemLinkIsNoName: 'itemLinkIsNoName_6ec53214', itemLink: 'itemLink_6ec53214', itemLinkIsExpanded: 'itemLinkIsExpanded_6ec53214', itemIcon: 'itemIcon_6ec53214', itemOverflow: 'itemOverflow_6ec53214', itemIconColor: 'itemIconColor_6ec53214', search: 'search_6ec53214', searchInput: 'searchInput_6ec53214', searchIconSearchWrapper: 'searchIconSearchWrapper_6ec53214', searchIconArrowWrapper: 'searchIconArrowWrapper_6ec53214', searchIconClearWrapper: 'searchIconClearWrapper_6ec53214', searchIconWrapper: 'searchIconWrapper_6ec53214', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_6ec53214{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";height:40px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.primaryCommands_6ec53214{position:absolute;overflow:hidden;display:inline;vertical-align:top;line-height:40px;max-width:100%;margin:0 20px}.sideCommands_6ec53214{position:absolute}html[dir=ltr] .sideCommands_6ec53214{right:0}html[dir=rtl] .sideCommands_6ec53214{left:0}html[dir=ltr] .sideCommands_6ec53214{text-align:right}html[dir=rtl] .sideCommands_6ec53214{text-align:left}html[dir=ltr] .sideCommands_6ec53214{padding-right:20px}html[dir=rtl] .sideCommands_6ec53214{padding-left:20px}.item_6ec53214{display:inline-block;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:40px;outline:transparent;vertical-align:top;margin:0 4px}.item_6ec53214:hover{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemChevronDown_6ec53214,.itemCommandText_6ec53214{display:inline-block;padding:0 4px;vertical-align:top}.itemText_6ec53214{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%}.itemText_6ec53214::-moz-focus-inner{border:0}.itemText_6ec53214{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemText_6ec53214:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemText_6ec53214.itemLinkIsNoName_6ec53214{padding:0 8px}.itemLink_6ec53214{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%;cursor:pointer}.itemLink_6ec53214::-moz-focus-inner{border:0}.itemLink_6ec53214{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemLink_6ec53214:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsNoName_6ec53214{padding:0 8px}@media screen and (-ms-high-contrast:active){.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::-moz-focus-inner,.itemLink_6ec53214:hover::-moz-focus-inner{border:0}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214,.itemLink_6ec53214:hover{outline:transparent;position:relative}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::after,.itemLink_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::-moz-focus-inner,.itemLink_6ec53214:hover::-moz-focus-inner{border:0}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214,.itemLink_6ec53214:hover{outline:transparent;position:relative}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::after,.itemLink_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.itemLink_6ec53214:hover:not([disabled]){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.itemLink_6ec53214:hover:not([disabled]) .itemIcon_6ec53214{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.itemLink_6ec53214:hover:not([disabled]) .itemChevronDown_6ec53214{color:" }, { "theme": "neutralPrimaryAlt", "defaultValue": "#3c3c3c" }, { "rawString": "}.itemLink_6ec53214:hover:not([disabled]) .itemOverflow_6ec53214{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214 .itemIcon_6ec53214{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214 .itemChevronDown_6ec53214{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214 .itemOverflow_6ec53214{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214:hover{background-color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.itemLink_6ec53214[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.itemLink_6ec53214[disabled] .itemIcon_6ec53214{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.itemIcon_6ec53214{font-size:16px;padding:0 4px}.itemIconColor_6ec53214{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.itemChevronDown_6ec53214{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:12px}.itemOverflow_6ec53214{font-size:18px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:0 7px}.search_6ec53214{width:208px;max-width:208px;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:40px;position:relative;box-sizing:border-box;border-color:transparent}html[dir=ltr] .search_6ec53214{float:left}html[dir=rtl] .search_6ec53214{float:right}html[dir=ltr] .search_6ec53214{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .search_6ec53214{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.search_6ec53214{z-index:10}html[dir=ltr] .search_6ec53214{border-right:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=rtl] .search_6ec53214{border-left:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){html[dir=ltr] .search_6ec53214{border-right:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}html[dir=rtl] .search_6ec53214{border-left:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.search_6ec53214:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.search_6ec53214:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.search_6ec53214:hover::-moz-focus-inner{border:0}.search_6ec53214:hover{outline:transparent;position:relative}.search_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.search_6ec53214:hover::-moz-focus-inner{border:0}.search_6ec53214:hover{outline:transparent;position:relative}.search_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.searchInput_6ec53214{height:40px;padding:8px 8px 8px 0;border:none;background-color:transparent;width:100%;box-sizing:border-box;outline:0;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}html[dir=ltr] .searchInput_6ec53214{border-left:42px solid transparent}html[dir=rtl] .searchInput_6ec53214{border-right:42px solid transparent}@media screen and (-ms-high-contrast:active){html[dir=ltr] .searchInput_6ec53214{border-left:40px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}html[dir=rtl] .searchInput_6ec53214{border-right:40px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){html[dir=ltr] .searchInput_6ec53214{border-left:40px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=rtl] .searchInput_6ec53214{border-right:40px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.searchInput_6ec53214::-ms-clear{display:none}.searchIconSearchWrapper_6ec53214{display:block}.searchIconArrowWrapper_6ec53214{display:none}.searchIconArrowWrapper_6ec53214,.searchIconSearchWrapper_6ec53214{top:0}html[dir=ltr] .searchIconArrowWrapper_6ec53214,html[dir=ltr] .searchIconSearchWrapper_6ec53214{padding-left:17px}html[dir=rtl] .searchIconArrowWrapper_6ec53214,html[dir=rtl] .searchIconSearchWrapper_6ec53214{padding-right:17px}html[dir=ltr] .searchIconArrowWrapper_6ec53214,html[dir=ltr] .searchIconSearchWrapper_6ec53214{padding-right:8px}html[dir=rtl] .searchIconArrowWrapper_6ec53214,html[dir=rtl] .searchIconSearchWrapper_6ec53214{padding-left:8px}.searchIconClearWrapper_6ec53214{display:none;top:1px;z-index:10}html[dir=ltr] .searchIconClearWrapper_6ec53214{right:0}html[dir=rtl] .searchIconClearWrapper_6ec53214{left:0}.searchIconWrapper_6ec53214{height:40px;line-height:40px;cursor:pointer;position:absolute;text-align:center}.search_6ec53214 .ms-Icon:before{font-size:16px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.searchInput_6ec53214,.searchInput_6ec53214::-webkit-input-placeholder{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=CommandBar.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/data", "./examples/CommandBar.Basic.Example", "./examples/CommandBar.NonFocusable.Example"], function (require, exports, React, example_app_base_1, data_1, CommandBar_Basic_Example_1, CommandBar_NonFocusable_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CommandBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx');
var CommandBarNoFocusableItemsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx');
var CommandBarPage = (function (_super) {
__extends(CommandBarPage, _super);
function CommandBarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CommandBarPage.prototype.render = function () {
var cmdBarParamsTextAndIcons = { items: data_1.items, farItems: data_1.farItems };
return (React.createElement(example_app_base_1.ComponentPage, { title: 'CommandBar', componentName: 'CommandBarExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'CommandBar with search box and overflowing menu items', code: CommandBarBasicExampleCode },
React.createElement(CommandBar_Basic_Example_1.CommandBarBasicExample, __assign({}, cmdBarParamsTextAndIcons))),
React.createElement(example_app_base_1.ExampleCard, { title: 'CommandBar with non-focusable items', code: CommandBarNoFocusableItemsExampleCode },
React.createElement(CommandBar_NonFocusable_Example_1.CommandBarNonFocusableItemsExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/CommandBar.Props.ts'),
require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions."),
React.createElement("p", null, "Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse."),
React.createElement("p", null, "All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Sort commands in order of importance from left to right or right to left depending on the culture."),
React.createElement("li", null, "Organize commands into logical groupings."),
React.createElement("li", null, "Display no more than 5-7 commands."),
React.createElement("li", null, "Use overflow to house less frequently-used commands."),
React.createElement("li", null, "In small breakpoints, only have the most recognizable commands render as icon only."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Fill the command bar completely from left to right."),
React.createElement("li", null, "Use icons only for commands in larger widths."),
React.createElement("li", null, "Display more than 2-3 items on the right side of the bar (or left side in left to right experiences)."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/CommandBar/CommandBar.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return CommandBarPage;
}(React.Component));
exports.CommandBarPage = CommandBarPage;
});
//# sourceMappingURL=CommandBarPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./CommandBar"], function (require, exports, CommandBar_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(CommandBar_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ContextualMenu.Props.js | 12.5% | (1 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 12.5% | (1 / 8) | |
| ContextualMenu.js | 4.5% | (10 / 222) | 5.49% | (10 / 182) | 2% | (1 / 50) | 4.76% | (10 / 210) | |
| ContextualMenu.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| ContextualMenu.visualtest.js | 10% | (1 / 10) | 100% | (0 / 0) | 0% | (0 / 5) | 11.11% | (1 / 9) | |
| ContextualMenuPage.js | 23.08% | (6 / 26) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 26.09% | (6 / 23) | |
| ContextualMenuPage.visualtest.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 9.09% | (1 / 11) | 30% | (6 / 20) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "../../common/DirectionalHint"], function (require, exports, DirectionalHint_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.DirectionalHint = DirectionalHint_1.DirectionalHint; var ContextualMenuItemType; (function (ContextualMenuItemType) { ContextualMenuItemType[ContextualMenuItemType["Normal"] = 0] = "Normal"; ContextualMenuItemType[ContextualMenuItemType["Divider"] = 1] = "Divider"; ContextualMenuItemType[ContextualMenuItemType["Header"] = 2] = "Header"; })(ContextualMenuItemType = exports.ContextualMenuItemType || (exports.ContextualMenuItemType = {})); }); //# sourceMappingURL=ContextualMenu.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 | 2 2 2 1 2 2 2 1 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "./ContextualMenu.Props", "../../common/DirectionalHint", "../../FocusZone", "../../Utilities", "../../Callout", "../../Icon", "./ContextualMenu.scss"], function (require, exports, React, ContextualMenu_Props_1, DirectionalHint_1, FocusZone_1, Utilities_1, Callout_1, Icon_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ContextualMenuType;
(function (ContextualMenuType) {
ContextualMenuType[ContextualMenuType["vertical"] = 0] = "vertical";
ContextualMenuType[ContextualMenuType["horizontal"] = 1] = "horizontal";
})(ContextualMenuType || (ContextualMenuType = {}));
var HorizontalAlignmentHint;
(function (HorizontalAlignmentHint) {
HorizontalAlignmentHint[HorizontalAlignmentHint["auto"] = 0] = "auto";
HorizontalAlignmentHint[HorizontalAlignmentHint["left"] = 1] = "left";
HorizontalAlignmentHint[HorizontalAlignmentHint["center"] = 2] = "center";
HorizontalAlignmentHint[HorizontalAlignmentHint["right"] = 3] = "right";
})(HorizontalAlignmentHint || (HorizontalAlignmentHint = {}));
var VerticalAlignmentHint;
(function (VerticalAlignmentHint) {
VerticalAlignmentHint[VerticalAlignmentHint["top"] = 0] = "top";
VerticalAlignmentHint[VerticalAlignmentHint["center"] = 1] = "center";
VerticalAlignmentHint[VerticalAlignmentHint["bottom"] = 2] = "bottom";
})(VerticalAlignmentHint || (VerticalAlignmentHint = {}));
function hasSubmenuItems(item) {
var submenuItems = getSubmenuItems(item);
return !!(submenuItems && submenuItems.length);
}
exports.hasSubmenuItems = hasSubmenuItems;
function getSubmenuItems(item) {
return item.subMenuProps ? item.subMenuProps.items : item.items;
}
exports.getSubmenuItems = getSubmenuItems;
var ContextualMenu = (function (_super) {
__extends(ContextualMenu, _super);
function ContextualMenu(props) {
var _this = _super.call(this, props) || this;
_this.state = {
contextualMenuItems: null,
subMenuId: Utilities_1.getId('ContextualMenu')
};
_this._isFocusingPreviousElement = false;
_this._enterTimerId = 0;
return _this;
}
ContextualMenu.prototype.dismiss = function (ev, dismissAll) {
var onDismiss = this.props.onDismiss;
if (onDismiss) {
onDismiss(ev, dismissAll);
}
};
ContextualMenu.prototype.componentWillUpdate = function (newProps) {
if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) {
var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target;
this._setTargetWindowAndElement(newTarget);
}
};
// Invoked once, both on the client and server, immediately before the initial rendering occurs.
ContextualMenu.prototype.componentWillMount = function () {
var target = this.props.targetElement ? this.props.targetElement : this.props.target;
this._setTargetWindowAndElement(target);
this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement : null;
};
// Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
ContextualMenu.prototype.componentDidMount = function () {
this._events.on(this._targetWindow, 'resize', this.dismiss);
if (this.props.onMenuOpened) {
this.props.onMenuOpened(this.props);
}
};
// Invoked immediately before a component is unmounted from the DOM.
ContextualMenu.prototype.componentWillUnmount = function () {
var _this = this;
if (this._isFocusingPreviousElement && this._previousActiveElement) {
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
// to reset the focus back to the thing it thinks should have been focused.
setTimeout(function () { return _this._previousActiveElement.focus(); }, 0);
}
this._events.dispose();
this._async.dispose();
};
ContextualMenu.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, items = _a.items, isBeakVisible = _a.isBeakVisible, labelElementId = _a.labelElementId, targetElement = _a.targetElement, id = _a.id, targetPoint = _a.targetPoint, useTargetPoint = _a.useTargetPoint, beakWidth = _a.beakWidth, directionalHint = _a.directionalHint, gapSpace = _a.gapSpace, coverTarget = _a.coverTarget, ariaLabel = _a.ariaLabel, doNotLayer = _a.doNotLayer, arrowDirection = _a.arrowDirection, target = _a.target, bounds = _a.bounds, directionalHintFixed = _a.directionalHintFixed, shouldFocusOnMount = _a.shouldFocusOnMount;
var submenuProps = this.state.submenuProps;
var hasIcons = !!(items && items.some(function (item) { return !!item.icon || !!item.iconProps; }));
var hasCheckmarks = !!(items && items.some(function (item) { return !!item.canCheck; }));
// The menu should only return if items were provided, if no items were provided then it should not appear.
if (items && items.length > 0) {
return (React.createElement(Callout_1.Callout, { target: target, targetElement: targetElement, targetPoint: targetPoint, useTargetPoint: useTargetPoint, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: 'ms-ContextualMenu-Callout', setInitialFocus: shouldFocusOnMount, onDismiss: this.props.onDismiss, bounds: bounds, directionalHintFixed: directionalHintFixed },
React.createElement("div", { ref: function (host) { return _this._host = host; }, id: id, className: Utilities_1.css('ms-ContextualMenu-container', className) },
(items && items.length) ? (React.createElement(FocusZone_1.FocusZone, { className: Utilities_1.css('ms-ContextualMenu is-open', styles.root), direction: arrowDirection, ariaLabelledBy: labelElementId, ref: function (focusZone) { return _this._focusZone = focusZone; }, role: 'menu', isCircularNavigation: true },
React.createElement("ul", { className: Utilities_1.css('ms-ContextualMenu-list is-open', styles.list), onKeyDown: this._onKeyDown, "aria-label": ariaLabel }, items.map(function (item, index) { return (_this._renderMenuItem(item, index, hasCheckmarks, hasIcons)); })))) : (null),
submenuProps ? (React.createElement(ContextualMenu, __assign({}, submenuProps))) : (null))));
}
else {
return null;
}
};
ContextualMenu.prototype._renderMenuItem = function (item, index, hasCheckmarks, hasIcons) {
var renderedItems = [];
if (item.name === '-') {
item.itemType = ContextualMenu_Props_1.ContextualMenuItemType.Divider;
}
switch (item.itemType) {
case ContextualMenu_Props_1.ContextualMenuItemType.Divider:
renderedItems.push(this._renderSeparator(index, item.className));
break;
case ContextualMenu_Props_1.ContextualMenuItemType.Header:
renderedItems.push(this._renderSeparator(index));
var headerItem = this._renderHeaderMenuItem(item, index, hasCheckmarks, hasIcons);
renderedItems.push(this._renderListItem(headerItem, item.key || index, item.className, item.title));
break;
default:
var menuItem = this._renderNormalItem(item, index, hasCheckmarks, hasIcons);
renderedItems.push(this._renderListItem(menuItem, item.key || index, item.className, item.title));
break;
}
return renderedItems;
};
ContextualMenu.prototype._renderListItem = function (content, key, className, title) {
return React.createElement("li", { role: 'menuitem', title: title, key: key, className: Utilities_1.css('ms-ContextualMenu-item', styles.item, className) }, content);
};
ContextualMenu.prototype._renderSeparator = function (index, className) {
if (index > 0) {
return React.createElement("li", { role: 'separator', key: 'separator-' + index, className: Utilities_1.css('ms-ContextualMenu-divider', styles.divider, className) });
}
return null;
};
ContextualMenu.prototype._renderNormalItem = function (item, index, hasCheckmarks, hasIcons) {
if (item.onRender) {
return [item.onRender(item)];
}
if (item.href) {
return this._renderAnchorMenuItem(item, index, hasCheckmarks, hasIcons);
}
return this._renderButtonItem(item, index, hasCheckmarks, hasIcons);
};
ContextualMenu.prototype._renderHeaderMenuItem = function (item, index, hasCheckmarks, hasIcons) {
return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-header', styles.header), style: item.style }, this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons)));
};
ContextualMenu.prototype._renderAnchorMenuItem = function (item, index, hasCheckmarks, hasIcons) {
return (React.createElement("div", null,
React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { href: item.href, className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (item.isDisabled || item.disabled) && 'is-disabled'), style: item.style, onClick: this._onAnchorClick.bind(this, item) }), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons))));
};
ContextualMenu.prototype._renderButtonItem = function (item, index, hasCheckmarks, hasIcons) {
var _this = this;
var _a = this.state, expandedMenuItemKey = _a.expandedMenuItemKey, subMenuId = _a.subMenuId;
var ariaLabel = '';
if (item.ariaLabel) {
ariaLabel = item.ariaLabel;
}
else if (item.name) {
ariaLabel = item.name;
}
var itemButtonProperties = {
className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (_b = {},
_b['is-expanded ' + styles.isExpanded] = (expandedMenuItemKey === item.key),
_b)),
onClick: this._onItemClick.bind(this, item),
onKeyDown: hasSubmenuItems(item) ? this._onItemKeyDown.bind(this, item) : null,
onMouseEnter: this._onItemMouseEnter.bind(this, item),
onMouseLeave: this._onMouseLeave,
onMouseDown: function (ev) { return _this._onItemMouseDown(item, ev); },
disabled: item.isDisabled || item.disabled,
href: item.href,
title: item.title,
'aria-label': ariaLabel,
'aria-haspopup': hasSubmenuItems(item) ? true : null,
'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
style: item.style,
};
return React.createElement('button', Utilities_1.assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), itemButtonProperties), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
var _b;
};
ContextualMenu.prototype._renderMenuItemChildren = function (item, index, hasCheckmarks, hasIcons) {
var isItemChecked = item.isChecked || item.checked;
return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-linkContent', styles.linkContent) },
(hasCheckmarks) ? (React.createElement(Icon_1.Icon, { iconName: isItemChecked ? 'CheckMark' : 'CustomIcon', className: Utilities_1.css('ms-ContextualMenu-icon', styles.icon), onClick: this._onItemClick.bind(this, item) })) : (null),
(hasIcons) ? (this._renderIcon(item)) : (null),
React.createElement("span", { className: Utilities_1.css('ms-ContextualMenu-itemText', styles.itemText) }, item.name),
hasSubmenuItems(item) ? (React.createElement(Icon_1.Icon, __assign({ iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: Utilities_1.css('ms-ContextualMenu-submenuIcon', styles.submenuIcon, item.submenuIconProps ? item.submenuIconProps.className : '') }))) : (null)));
};
ContextualMenu.prototype._renderIcon = function (item) {
// Only present to allow continued use of item.icon which is deprecated.
var iconProps = item.iconProps ? item.iconProps : {
iconName: 'CustomIcon',
className: item.icon ? 'ms-Icon--' + item.icon : ''
};
// Use the default icon color for the known icon names
var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-ContextualMenu-iconColor ' + styles.iconColor);
var iconClassName = Utilities_1.css('ms-ContextualMenu-icon', styles.icon, iconColorClassName, iconProps.className);
return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName }));
};
ContextualMenu.prototype._onKeyDown = function (ev) {
var submenuCloseKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.right : Utilities_1.KeyCodes.left;
if (ev.which === Utilities_1.KeyCodes.escape
|| ev.which === Utilities_1.KeyCodes.tab
|| (ev.which === submenuCloseKey && this.props.isSubMenu && this.props.arrowDirection === FocusZone_1.FocusZoneDirection.vertical)) {
// When a user presses escape, we will try to refocus the previous focused element.
this._isFocusingPreviousElement = true;
ev.preventDefault();
ev.stopPropagation();
this.dismiss(ev);
}
};
ContextualMenu.prototype._onItemMouseEnter = function (item, ev) {
var _this = this;
var targetElement = ev.currentTarget;
if (item.key !== this.state.expandedMenuItemKey) {
if (hasSubmenuItems(item)) {
this._enterTimerId = this._async.setTimeout(function () { return _this._onItemSubMenuExpand(item, targetElement); }, 500);
}
else {
this._enterTimerId = this._async.setTimeout(function () { return _this._onSubMenuDismiss(ev); }, 500);
}
}
};
ContextualMenu.prototype._onMouseLeave = function (ev) {
this._async.clearTimeout(this._enterTimerId);
};
ContextualMenu.prototype._onItemMouseDown = function (item, ev) {
if (item.onMouseDown) {
item.onMouseDown(item, ev);
}
};
ContextualMenu.prototype._onItemClick = function (item, ev) {
var items = getSubmenuItems(item);
if (!items || !items.length) {
this._executeItemClick(item, ev);
}
else {
if (item.key === this.state.expandedMenuItemKey) {
this._onSubMenuDismiss(ev);
}
else {
this._onItemSubMenuExpand(item, ev.currentTarget);
}
}
ev.stopPropagation();
ev.preventDefault();
};
ContextualMenu.prototype._onAnchorClick = function (item, ev) {
this._executeItemClick(item, ev);
ev.stopPropagation();
};
ContextualMenu.prototype._executeItemClick = function (item, ev) {
if (item.onClick) {
item.onClick(ev, item);
}
else if (this.props.onItemClick) {
this.props.onItemClick(ev, item);
}
this.dismiss(ev, true);
};
ContextualMenu.prototype._onItemKeyDown = function (item, ev) {
var openKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.left : Utilities_1.KeyCodes.right;
if (ev.which === openKey) {
this._onItemSubMenuExpand(item, ev.currentTarget);
ev.preventDefault();
}
};
ContextualMenu.prototype._onItemSubMenuExpand = function (item, target) {
if (this.state.expandedMenuItemKey !== item.key) {
if (this.state.submenuProps) {
this._onSubMenuDismiss();
}
var submenuProps = {
items: getSubmenuItems(item),
target: target,
onDismiss: this._onSubMenuDismiss,
isSubMenu: true,
id: this.state.subMenuId,
shouldFocusOnMount: true,
directionalHint: Utilities_1.getRTL() ? DirectionalHint_1.DirectionalHint.leftTopEdge : DirectionalHint_1.DirectionalHint.rightTopEdge,
className: this.props.className,
gapSpace: 0
};
if (item.subMenuProps) {
Utilities_1.assign(submenuProps, item.subMenuProps);
}
this.setState({
expandedMenuItemKey: item.key,
submenuProps: submenuProps,
});
}
};
ContextualMenu.prototype._onSubMenuDismiss = function (ev, dismissAll) {
if (dismissAll) {
this.dismiss(ev, dismissAll);
}
else {
this.setState({
dismissedMenuItemKey: this.state.expandedMenuItemKey,
expandedMenuItemKey: null,
submenuProps: null
});
}
};
ContextualMenu.prototype._setTargetWindowAndElement = function (target) {
if (target) {
if (typeof target === 'string') {
var currentDoc = Utilities_1.getDocument();
this._target = currentDoc ? currentDoc.querySelector(target) : null;
this._targetWindow = Utilities_1.getWindow();
}
else if (target.stopPropagation) {
this._target = target;
this._targetWindow = Utilities_1.getWindow(target.toElement);
}
else {
var targetElement = target;
this._target = target;
this._targetWindow = Utilities_1.getWindow(targetElement);
}
}
else {
this._targetWindow = Utilities_1.getWindow();
}
};
return ContextualMenu;
}(Utilities_1.BaseComponent));
// The default ContextualMenu properities have no items and beak, the default submenu direction is right and top.
ContextualMenu.defaultProps = {
items: [],
shouldFocusOnMount: true,
isBeakVisible: false,
gapSpace: 0,
directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge,
beakWidth: 16,
arrowDirection: FocusZone_1.FocusZoneDirection.vertical,
};
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "dismiss", null);
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "_onKeyDown", null);
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "_onMouseLeave", null);
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "_onSubMenuDismiss", null);
exports.ContextualMenu = ContextualMenu;
});
//# sourceMappingURL=ContextualMenu.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_d02768e7', list: 'list_d02768e7', item: 'item_d02768e7', link: 'link_d02768e7', isDisabled: 'isDisabled_d02768e7', icon: 'icon_d02768e7', isExpanded: 'isExpanded_d02768e7', header: 'header_d02768e7', linkContent: 'linkContent_d02768e7', divider: 'divider_d02768e7', iconColor: 'iconColor_d02768e7', itemText: 'itemText_d02768e7', submenuIcon: 'submenuIcon_d02768e7', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_d02768e7{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:180px}.list_d02768e7{list-style-type:none;margin:0;padding:0;line-height:0}.item_d02768e7{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:36px;position:relative;box-sizing:border-box}.link_d02768e7{font:inherit;color:inherit;background:0 0;border:none;width:100%;height:36px;line-height:36px;display:block;cursor:pointer;padding:0 6px}.link_d02768e7::-moz-focus-inner{border:0}.link_d02768e7{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .link_d02768e7:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .link_d02768e7{text-align:left}html[dir=rtl] .link_d02768e7{text-align:right}.link_d02768e7:hover:not([disabled]){background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_d02768e7.isDisabled_d02768e7,.link_d02768e7[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.link_d02768e7.isDisabled_d02768e7 .icon_d02768e7,.link_d02768e7[disabled] .icon_d02768e7{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.is-focusVisible .link_d02768e7:focus{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_d02768e7.isExpanded_d02768e7,.link_d02768e7.isExpanded_d02768e7:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-weight:600}.header_d02768e7{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header_d02768e7::-moz-focus-inner{border:0}.header_d02768e7{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .header_d02768e7:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .header_d02768e7{text-align:left}html[dir=rtl] .header_d02768e7{text-align:right}a.link_d02768e7{padding:0 6px;text-rendering:auto;color:inherit;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-decoration:none;box-sizing:border-box}.linkContent_d02768e7{white-space:nowrap;height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%}.divider_d02768e7{display:block;height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";position:relative}.icon_d02768e7{display:inline-block;min-height:1px;max-height:36px;width:14px;margin:0 4px;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}.iconColor_d02768e7{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.itemText_d02768e7{margin:0 4px;vertical-align:middle;display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.submenuIcon_d02768e7{height:36px;line-height:36px;text-align:center;font-size:10px;display:inline-block;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ContextualMenu.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 2 | define(["require", "exports", "../../common/VisualTest"], function (require, exports, VisualTest_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-function-expression */ casper. start(VisualTest_1.baseUrl + 'contextualMenu'). then(function () { phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_not_pressed'); }).then(function () { this.mouse.move('#ContextualMenu'); phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_hovered'); }).then(function () { this.mouse.down('#ContextualMenu'); phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_pressed'); }); casper.run(function () { casper.test.done(); }); }); /* tslint:enable:no-function-expression */ //# sourceMappingURL=ContextualMenu.visualtest.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/ContextualMenu.Basic.Example", "./examples/ContextualMenu.Checkmarks.Example", "./examples/ContextualMenu.Directional.Example", "./examples/ContextualMenu.Customization.Example", "./examples/ContextualMenu.Header.Example"], function (require, exports, React, example_app_base_1, ContextualMenu_Basic_Example_1, ContextualMenu_Checkmarks_Example_1, ContextualMenu_Directional_Example_1, ContextualMenu_Customization_Example_1, ContextualMenu_Header_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ContextualMenuBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx');
var ContextualMenuCheckmarksExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx');
var ContextualMenuDirectionalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx');
var ContextualMenuCustomizationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx');
var ContextualMenuHeaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx');
var ContextualMenuPage = (function (_super) {
__extends(ContextualMenuPage, _super);
function ContextualMenuPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ContextualMenuPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ContextualMenu', componentName: 'ContextualMenuExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu', code: ContextualMenuBasicExampleCode },
React.createElement(ContextualMenu_Basic_Example_1.ContextualMenuBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu checked menus example', code: ContextualMenuCheckmarksExampleCode },
React.createElement(ContextualMenu_Checkmarks_Example_1.ContextualMenuCheckmarksExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu beak/direction test', code: ContextualMenuDirectionalExampleCode },
React.createElement(ContextualMenu_Directional_Example_1.ContextualMenuDirectionalExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu customization example', code: ContextualMenuCustomizationExampleCode },
React.createElement(ContextualMenu_Customization_Example_1.ContextualMenuCustomizationExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu header example', code: ContextualMenuHeaderExampleCode },
React.createElement(ContextualMenu_Header_Example_1.ContextualMenuHeaderExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts'),
require('!raw-loader!office-ui-fabric-react/src/components/Callout/Callout.Props.ts'),
] }), overview: React.createElement("div", null,
React.createElement("p", null, "ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places."),
React.createElement("p", null, "There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons."),
React.createElement("p", null, "Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don\u2019t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use to display commands."),
React.createElement("li", null, "Divide groups of commands with rules."),
React.createElement("li", null, "Use selection checks without icons."),
React.createElement("li", null, "Provide submenus for sets of related commands that aren\u2019t as critical as others."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display content."),
React.createElement("li", null, "Show commands as one large group."),
React.createElement("li", null, "Mix checks and icons."),
React.createElement("li", null, "Create submenus of submenus."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/ContextualMenu/ContextualMenu.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ContextualMenuPage;
}(React.Component));
exports.ContextualMenuPage = ContextualMenuPage;
});
//# sourceMappingURL=ContextualMenuPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "./index", "react"], function (require, exports, index_1, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:enable:no-unused-variable */
var ContextualMenuVPage = (function (_super) {
__extends(ContextualMenuVPage, _super);
function ContextualMenuVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ContextualMenuVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.ContextualMenu, { id: 'ContextualMenu', shouldFocusOnMount: false, items: [{
key: 'new',
name: 'New',
icon: 'Add',
onClick: function () { return alert('New'); }
},
{
key: 'upload',
name: 'Upload',
icon: 'Upload',
onClick: function () { return alert('upload'); }
}] })));
};
return ContextualMenuVPage;
}(React.Component));
exports.default = ContextualMenuVPage;
});
//# sourceMappingURL=ContextualMenuPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./ContextualMenu", "./ContextualMenu.Props"], function (require, exports, ContextualMenu_1, ContextualMenu_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(ContextualMenu_1); __export(ContextualMenu_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DatePicker.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| DatePicker.js | 5.11% | (7 / 137) | 5.65% | (7 / 124) | 3.85% | (1 / 26) | 5.34% | (7 / 131) | |
| DatePicker.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DatePickerPage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=DatePicker.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Calendar", "../../Callout", "../../common/DirectionalHint", "../../TextField", "../../Utilities", "../../utilities/dateMath/DateMath", "./DatePicker.scss"], function (require, exports, React, Calendar_1, Callout_1, DirectionalHint_1, TextField_1, Utilities_1, DateMath_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DEFAULT_STRINGS = {
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
shortMonths: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
shortDays: [
'S',
'M',
'T',
'W',
'T',
'F',
'S'
],
goToToday: 'Go to today',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year'
};
var DatePicker = (function (_super) {
__extends(DatePicker, _super);
function DatePicker(props) {
var _this = _super.call(this) || this;
var formatDate = props.formatDate, value = props.value;
_this.state = {
selectedDate: value || new Date(),
formattedDate: (formatDate && value) ? formatDate(value) : '',
isDatePickerShown: false,
errorMessage: null
};
_this._preventFocusOpeningPicker = false;
return _this;
}
DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value;
var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null;
// Set error message
this.setState({
errorMessage: errorMessage
});
// Issue# 1274: Check if the date value changed from old props value, i.e., if indeed a new date is being
// passed in or if the formatting function was modified. We only update the selected date if either of these
// had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this
// is the result of the onSelectDate callback, but this should be a rare scenario.
var oldValue = this.props.value;
if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) {
this.setState({
selectedDate: value || new Date(),
formattedDate: (formatDate && value) ? formatDate(value) : '',
});
}
};
DatePicker.prototype.render = function () {
var _this = this;
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput;
var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, errorMessage = _b.errorMessage;
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker', styles.root), ref: 'root' },
React.createElement("div", { ref: function (c) { return _this._datepicker = c; } },
React.createElement(TextField_1.TextField, { className: styles.textField, ariaLabel: ariaLabel, "aria-haspopup": 'true', required: isRequired, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, iconClass: Utilities_1.css('ms-Icon ms-Icon--Calendar', label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel), readOnly: !allowTextInput, value: formattedDate, ref: 'textField' })),
isDatePickerShown && (React.createElement(Callout_1.Callout, { isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, targetElement: this._datepicker, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned },
React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, value: selectedDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: this._resolveRef('_calendar') })))));
};
DatePicker.prototype._onSelectDate = function (date) {
var _a = this.props, formatDate = _a.formatDate, onSelectDate = _a.onSelectDate;
this.setState({
selectedDate: date,
isDatePickerShown: false,
formattedDate: formatDate && date ? formatDate(date) : '',
});
if (onSelectDate) {
onSelectDate(date);
}
};
;
DatePicker.prototype._onCalloutPositioned = function () {
this._calendar.focus();
};
DatePicker.prototype._onTextFieldFocus = function (ev) {
if (this.props.disableAutoFocus) {
return;
}
if (!this.props.allowTextInput) {
if (!this._preventFocusOpeningPicker) {
this._showDatePickerPopup();
}
else {
this._preventFocusOpeningPicker = false;
}
}
};
;
DatePicker.prototype._onTextFieldBlur = function (ev) {
this._validateTextInput();
};
;
DatePicker.prototype._onTextFieldChanged = function (newValue) {
if (this.props.allowTextInput) {
if (this.state.isDatePickerShown) {
this._dismissDatePickerPopup();
}
var _a = this.props, isRequired = _a.isRequired, value = _a.value, strings = _a.strings;
this.setState({
errorMessage: (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null,
formattedDate: newValue
});
}
};
DatePicker.prototype._onTextFieldKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
ev.preventDefault();
ev.stopPropagation();
if (!this.state.isDatePickerShown) {
this._showDatePickerPopup();
}
else {
// When DatePicker allows input date string directly,
// it is expected to hit another enter to close the popup
if (this.props.allowTextInput) {
this._dismissDatePickerPopup();
}
}
break;
case Utilities_1.KeyCodes.escape:
this._handleEscKey(ev);
break;
default:
break;
}
};
;
DatePicker.prototype._onTextFieldClick = function (ev) {
if (!this.state.isDatePickerShown) {
this._showDatePickerPopup();
}
else {
if (this.props.allowTextInput) {
this.setState({
isDatePickerShown: false
});
}
}
};
DatePicker.prototype._showDatePickerPopup = function () {
if (!this.state.isDatePickerShown) {
this._preventFocusOpeningPicker = true;
this._focusOnSelectedDateOnUpdate = true;
this.setState({
isDatePickerShown: true,
navigatedDate: this.state.selectedDate,
errorMessage: ''
});
}
};
DatePicker.prototype._dismissDatePickerPopup = function () {
if (this.state.isDatePickerShown) {
this.setState({
isDatePickerShown: false
});
this._validateTextInput();
}
};
/**
* Callback for closing the calendar callout
*/
DatePicker.prototype._calendarDismissed = function () {
this._preventFocusOpeningPicker = true;
this._dismissDatePickerPopup();
if (this.refs.textField) {
this.refs.textField.focus();
}
};
DatePicker.prototype._handleEscKey = function (ev) {
this._calendarDismissed();
};
DatePicker.prototype._validateTextInput = function () {
var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, formatDate = _a.formatDate, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate;
var inputValue = this.state.formattedDate;
// Do validation only if DatePicker's popup is dismissed
if (this.state.isDatePickerShown) {
return;
}
// Check when DatePicker is a required field but has NO input value
if (isRequired && !inputValue) {
this.setState({
// Since fabic react doesn't have loc support yet
// use the symbol '*' to represent error message
errorMessage: strings.isRequiredErrorMessage || '*'
});
return;
}
if (allowTextInput) {
var date = null;
if (inputValue) {
date = parseDateFromString(inputValue);
if (!date) {
this.setState({
errorMessage: strings.invalidInputErrorMessage || '*'
});
}
else {
this.setState({
selectedDate: date,
errorMessage: ''
});
}
}
else {
// No input date string shouldn't be an error if field is not required
this.setState({
errorMessage: ''
});
}
// Execute onSelectDate callback
if (onSelectDate) {
// If no input date string or input date string is invalid
// date variable will be null, callback should expect null value for this case
onSelectDate(date);
}
}
};
return DatePicker;
}(Utilities_1.BaseComponent));
DatePicker.defaultProps = {
allowTextInput: false,
formatDate: function (date) {
if (date) {
return date.toDateString();
}
return '';
},
parseDateFromString: function (dateStr) {
var date = Date.parse(dateStr);
if (date) {
return new Date(date);
}
return null;
},
firstDayOfWeek: Calendar_1.DayOfWeek.Sunday,
isRequired: false,
isMonthPickerVisible: true,
strings: DEFAULT_STRINGS
};
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onSelectDate", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onCalloutPositioned", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldFocus", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldBlur", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldChanged", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldKeyDown", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldClick", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_dismissDatePickerPopup", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_calendarDismissed", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_handleEscKey", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_validateTextInput", null);
exports.DatePicker = DatePicker;
});
//# sourceMappingURL=DatePicker.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_113f0f82', textField: 'textField_113f0f82', eventWithLabel: 'eventWithLabel_113f0f82', eventWithoutLabel: 'eventWithoutLabel_113f0f82', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_113f0f82{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px}.textField_113f0f82{position:relative}.textField_113f0f82 input::-ms-clear{display:none}.textField_113f0f82 input[readonly]{cursor:pointer}.eventWithLabel_113f0f82{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;bottom:5px}html[dir=ltr] .eventWithLabel_113f0f82{right:9px}html[dir=rtl] .eventWithLabel_113f0f82{left:9px}.eventWithoutLabel_113f0f82{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;top:7px}html[dir=ltr] .eventWithoutLabel_113f0f82{right:9px}html[dir=rtl] .eventWithoutLabel_113f0f82{left:9px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=DatePicker.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/DatePicker.Basic.Example", "./examples/DatePicker.Required.Example", "./examples/DatePicker.Input.Example"], function (require, exports, React, example_app_base_1, DatePicker_Basic_Example_1, DatePicker_Required_Example_1, DatePicker_Input_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DatePickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx');
var DatePickerRequiredExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx');
var DatePickerInputExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx');
var DatePickerPage = (function (_super) {
__extends(DatePickerPage, _super);
function DatePickerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DatePickerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DatePicker', componentName: 'DatePickerExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'DatePicker', code: DatePickerBasicExampleCode },
React.createElement(DatePicker_Basic_Example_1.DatePickerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DatePicker as required field', code: DatePickerRequiredExampleCode },
React.createElement(DatePicker_Required_Example_1.DatePickerRequiredExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DatePicker allows input date string', code: DatePickerInputExampleCode },
React.createElement(DatePicker_Input_Example_1.DatePickerInputExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/DatePicker.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The DatePicker component enables a user to pick a date value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the control as a single entity."),
React.createElement("li", null, "Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference)."),
React.createElement("li", null, "The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate."),
React.createElement("li", null, "When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px \u2013 wide). Plan your UI implementation accordingly."),
React.createElement("li", null, "The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar."),
React.createElement("li", null, "Don't attempt to force resize the control in any way."),
React.createElement("li", null, "Don't force the control to render one mode vs. the other (year or month/day)"),
React.createElement("li", null, "The flyout selector is a light dismiss control. Don't modify this behavior in any way."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/DatePicker/DatePicker.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return DatePickerPage;
}(React.Component));
exports.DatePickerPage = DatePickerPage;
});
//# sourceMappingURL=DatePickerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./DatePicker", "../Calendar/Calendar.Props"], function (require, exports, DatePicker_1, Calendar_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(DatePicker_1); __export(Calendar_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DetailsHeader.js | 5.56% | (7 / 126) | 6.19% | (7 / 113) | 4% | (1 / 25) | 5.83% | (7 / 120) | |
| DetailsHeader.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DetailsList.Props.js | 5% | (1 / 20) | 0% | (0 / 8) | 0% | (0 / 5) | 5% | (1 / 20) | |
| DetailsList.js | 3.26% | (9 / 276) | 4.78% | (10 / 209) | 2.5% | (1 / 40) | 3.35% | (9 / 269) | |
| DetailsList.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DetailsListPage.js | 21.43% | (6 / 28) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 24% | (6 / 25) | |
| DetailsRow.js | 6.42% | (7 / 109) | 8.43% | (7 / 83) | 4.76% | (1 / 21) | 6.67% | (7 / 105) | |
| DetailsRow.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DetailsRowCheck.js | 16.67% | (1 / 6) | 0% | (0 / 2) | 0% | (0 / 2) | 16.67% | (1 / 6) | |
| DetailsRowFields.js | 13.95% | (6 / 43) | 14.29% | (4 / 28) | 7.14% | (1 / 14) | 15% | (6 / 40) | |
| index.js | 18.18% | (2 / 11) | 0% | (0 / 2) | 0% | (0 / 2) | 22.22% | (2 / 9) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./DetailsList.Props", "../../FocusZone", "../../Check", "../../Icon", "../../Layer", "../GroupedList/GroupSpacer", "../../utilities/selection/interfaces", "./DetailsHeader.scss"], function (require, exports, React, Utilities_1, DetailsList_Props_1, FocusZone_1, Check_1, Icon_1, Layer_1, GroupSpacer_1, interfaces_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
var INNER_PADDING = 16;
var SelectAllVisibility;
(function (SelectAllVisibility) {
SelectAllVisibility[SelectAllVisibility["none"] = 0] = "none";
SelectAllVisibility[SelectAllVisibility["hidden"] = 1] = "hidden";
SelectAllVisibility[SelectAllVisibility["visible"] = 2] = "visible";
})(SelectAllVisibility = exports.SelectAllVisibility || (exports.SelectAllVisibility = {}));
var DetailsHeader = (function (_super) {
__extends(DetailsHeader, _super);
function DetailsHeader(props) {
var _this = _super.call(this, props) || this;
_this.state = {
columnResizeDetails: null,
groupNestingDepth: _this.props.groupNestingDepth,
isAllCollapsed: _this.props.isAllCollapsed
};
_this._onToggleCollapseAll = _this._onToggleCollapseAll.bind(_this);
_this._onSelectAllClicked = _this._onSelectAllClicked.bind(_this);
return _this;
}
DetailsHeader.prototype.componentDidMount = function () {
var selection = this.props.selection;
this._events.on(selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
// We need to use native on this to avoid MarqueeSelection from handling the event before us.
this._events.on(this.refs.root, 'mousedown', this._onRootMouseDown);
};
DetailsHeader.prototype.componentWillReceiveProps = function (newProps) {
var groupNestingDepth = this.state.groupNestingDepth;
if (newProps.groupNestingDepth !== groupNestingDepth) {
this.setState({ groupNestingDepth: newProps.groupNestingDepth });
}
};
DetailsHeader.prototype.render = function () {
var _this = this;
var _a = this.props, columns = _a.columns, ariaLabel = _a.ariaLabel, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility;
var _b = this.state, isAllSelected = _b.isAllSelected, columnResizeDetails = _b.columnResizeDetails, isSizing = _b.isSizing, groupNestingDepth = _b.groupNestingDepth, isAllCollapsed = _b.isAllCollapsed;
return (React.createElement("div", { role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsHeader', styles.root, (_c = {},
_c['is-allSelected ' + styles.rootIsAllSelected] = isAllSelected,
_c['is-selectAllHidden ' + styles.rootIsSelectAllHidden] = selectAllVisibility === SelectAllVisibility.hidden,
_c['is-resizingColumn'] = !!columnResizeDetails && isSizing,
_c)), ref: 'root', onMouseMove: this._onRootMouseMove, "data-automationid": 'DetailsHeader' },
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal },
(selectAllVisibility !== SelectAllVisibility.none) ? (React.createElement("div", { className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader' },
React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell is-check', styles.cell, styles.cellIsCheck), onClick: this._onSelectAllClicked, "aria-label": ariaLabelForSelectAllCheckbox, "aria-pressed": isAllSelected },
React.createElement(Check_1.Check, { checked: isAllSelected })))) : null,
groupNestingDepth > 0 ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell), onClick: this._onToggleCollapseAll },
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-collapseButton', styles.collapseButton, isAllCollapsed && ('is-collapsed ' + styles.collapseButtonIsCollapsed)), iconName: 'ChevronDown' }))) : (null),
GroupSpacer_1.GroupSpacer({ count: groupNestingDepth - 1 }),
columns.map(function (column, columnIndex) {
return (React.createElement("div", { key: column.key, className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader', "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' },
React.createElement("button", { type: 'button', key: column.fieldName, disabled: column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.disabled, className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell, column.headerClassName, (_a = {},
_a['is-actionable ' + styles.cellIsActionable] = column.columnActionsMode !== DetailsList_Props_1.ColumnActionsMode.disabled,
_a['is-empty ' + styles.cellIsEmpty] = !column.name,
_a['is-icon-visible'] = column.isSorted || column.isGrouped || column.isFiltered,
_a)), style: { width: column.calculatedWidth + INNER_PADDING }, onClick: _this._onColumnClick.bind(_this, column), onContextMenu: _this._onColumnContextMenu.bind(_this, column), "aria-haspopup": column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown, "aria-label": column.ariaLabel || column.name, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key },
column.isFiltered && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'Filter' })),
column.isSorted && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),
column.isGrouped && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'GroupedDescending' })),
column.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(styles.nearIcon, column.iconClassName), iconName: column.iconName })),
column.name,
column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown && (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-filterChevron', styles.filterChevron), iconName: 'ChevronDown' }))),
(column.isResizable) && (React.createElement("div", { "data-sizer-index": columnIndex, className: Utilities_1.css('ms-DetailsHeader-cell is-sizer', styles.cell, styles.cellIsSizer, (_b = {},
_b['is-resizing ' + styles.cellIsResizing] = isSizing && columnResizeDetails.columnIndex === columnIndex,
_b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) }))));
var _a, _b;
})),
isSizing && (React.createElement(Layer_1.Layer, null,
React.createElement("div", { className: Utilities_1.css(isSizing && styles.sizingOverlay), onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));
var _c;
};
/** Set focus to the active thing in the focus area. */
DetailsHeader.prototype.focus = function () {
return this.refs.focusZone.focus();
};
/**
* double click on the column sizer will auto ajust column width
* to fit the longest content among current rendered rows.
*
* @private
* @param {number} columnIndex (index of the column user double clicked)
* @param {React.MouseEvent} ev (mouse double click event)
*/
DetailsHeader.prototype._onSizerDoubleClick = function (columnIndex, ev) {
var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, columns = _a.columns;
if (onColumnAutoResized) {
onColumnAutoResized(columns[columnIndex], columnIndex);
}
};
/**
* Called when the select all toggle is clicked.
*/
DetailsHeader.prototype._onSelectAllClicked = function () {
var selection = this.props.selection;
selection.toggleAllSelected();
};
DetailsHeader.prototype._onRootMouseDown = function (ev) {
var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
var columnIndex = Number(columnIndexAttr);
var columns = this.props.columns;
if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
// Ignore anything except the primary button.
return;
}
this.setState({
columnResizeDetails: {
columnIndex: columnIndex,
columnMinWidth: columns[columnIndex].calculatedWidth,
originX: ev.clientX
}
});
ev.preventDefault();
ev.stopPropagation();
};
DetailsHeader.prototype._onRootMouseMove = function (ev) {
var _a = this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
this.setState({ isSizing: true });
}
};
/**
* mouse move event handler in the header
* it will set isSizing state to true when user clicked on the sizer and move the mouse.
*
* @private
* @param {React.MouseEvent} ev (mouse move event)
*/
DetailsHeader.prototype._onSizerMouseMove = function (ev) {
var
// use buttons property here since ev.button in some edge case is not upding well during the move.
// but firefox doesn't support it, so we set the default value when it is not defined.
buttons = ev.buttons;
var _a = this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, columns = _a.columns;
var columnResizeDetails = this.state.columnResizeDetails;
if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
// cancel mouse down event and return early when the primary button is not pressed
this._onSizerMouseUp(ev);
return;
}
if (ev.clientX !== columnResizeDetails.originX) {
if (onColumnIsSizingChanged) {
onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
}
}
if (onColumnResized) {
var movement = ev.clientX - columnResizeDetails.originX;
if (Utilities_1.getRTL()) {
movement = -movement;
}
onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement);
}
};
/**
* mouse up event handler in the header
* clear the resize related state.
* This is to ensure we can catch double click event
*
* @private
* @param {React.MouseEvent} ev (mouse up event)
*/
DetailsHeader.prototype._onSizerMouseUp = function (ev) {
var _a = this.props, columns = _a.columns, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;
var columnResizeDetails = this.state.columnResizeDetails;
this.setState({
columnResizeDetails: null,
isSizing: false
});
if (onColumnIsSizingChanged) {
onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);
}
};
DetailsHeader.prototype._onSelectionChanged = function () {
var isAllSelected = this.props.selection.isAllSelected();
if (this.state.isAllSelected !== isAllSelected) {
this.setState({
isAllSelected: isAllSelected
});
}
};
DetailsHeader.prototype._onColumnClick = function (column, ev) {
var onColumnClick = this.props.onColumnClick;
if (column.onColumnClick) {
column.onColumnClick(ev, column);
}
if (onColumnClick) {
onColumnClick(ev, column);
}
};
DetailsHeader.prototype._onColumnContextMenu = function (column, ev) {
var onColumnContextMenu = this.props.onColumnContextMenu;
if (column.onContextMenu) {
column.onColumnContextMenu(column, ev);
}
if (onColumnContextMenu) {
onColumnContextMenu(column, ev);
}
};
DetailsHeader.prototype._onToggleCollapseAll = function () {
var onToggleCollapseAll = this.props.onToggleCollapseAll;
var newCollapsed = !this.state.isAllCollapsed;
this.setState({
isAllCollapsed: newCollapsed
});
if (onToggleCollapseAll) {
onToggleCollapseAll(newCollapsed);
}
};
return DetailsHeader;
}(Utilities_1.BaseComponent));
DetailsHeader.defaultProps = {
isSelectAllVisible: SelectAllVisibility.visible
};
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onSelectAllClicked", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onRootMouseDown", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onRootMouseMove", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onSizerMouseMove", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onSizerMouseUp", null);
exports.DetailsHeader = DetailsHeader;
});
//# sourceMappingURL=DetailsHeader.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_0faa994f', rootIsSelectAllHidden: 'rootIsSelectAllHidden_0faa994f', cell: 'cell_0faa994f', cellIsCheck: 'cellIsCheck_0faa994f', rootIsAllSelected: 'rootIsAllSelected_0faa994f', cellWrapper: 'cellWrapper_0faa994f', cellIsActionable: 'cellIsActionable_0faa994f', cellIsSizer: 'cellIsSizer_0faa994f', cellIsEmpty: 'cellIsEmpty_0faa994f', cellIsResizing: 'cellIsResizing_0faa994f', collapseButton: 'collapseButton_0faa994f', collapseButtonIsCollapsed: 'collapseButtonIsCollapsed_0faa994f', nearIcon: 'nearIcon_0faa994f', filterChevron: 'filterChevron_0faa994f', sizingOverlay: 'sizingOverlay_0faa994f', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_0faa994f{display:inline-block;min-width:100%;vertical-align:top;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_0faa994f.rootIsSelectAllHidden_0faa994f .cell_0faa994f.cellIsCheck_0faa994f{visibility:hidden}.cell_0faa994f.cellIsCheck_0faa994f .ms-Check-background{opacity:0}.cell_0faa994f.cellIsCheck_0faa994f:hover .ms-Check-background,.root_0faa994f.rootIsAllSelected_0faa994f .ms-Check-background{opacity:1}.cellWrapper_0faa994f{display:inline-block;position:relative}.cell_0faa994f{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;background:0 0;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";font-weight:400;position:relative;display:inline-block;box-sizing:border-box;padding:0 8px;border:none;line-height:inherit;margin:0;height:36px;vertical-align:top;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cell_0faa994f::-moz-focus-inner{border:0}.cell_0faa994f{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .cell_0faa994f:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .cell_0faa994f{text-align:left}html[dir=rtl] .cell_0faa994f{text-align:right}html[dir=ltr] .cell_0faa994f{text-align:left}html[dir=rtl] .cell_0faa994f{text-align:right}.cell_0faa994f.cellIsCheck_0faa994f{position:relative;padding:6px;margin:0}.cell_0faa994f.cellIsActionable_0faa994f{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.cell_0faa994f.cellIsActionable_0faa994f:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.cell_0faa994f.cellIsActionable_0faa994f:active{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.cell_0faa994f.cellIsSizer_0faa994f{position:absolute;width:16px;cursor:ew-resize;bottom:0;top:0;height:inherit;background:0 0}html[dir=ltr] .cell_0faa994f.cellIsSizer_0faa994f{margin-left:-10px}html[dir=rtl] .cell_0faa994f.cellIsSizer_0faa994f{margin-right:-10px}.cell_0faa994f.cellIsEmpty_0faa994f{text-overflow:clip}.cell_0faa994f.cellIsSizer_0faa994f:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";opacity:0}.cell_0faa994f.cellIsSizer_0faa994f.cellIsResizing_0faa994f:after,.cell_0faa994f.cellIsSizer_0faa994f:hover:after{opacity:1;transition:opacity .3s linear}.collapseButton_0faa994f{text-align:center;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear;width:20px;outline:0}.collapseButton_0faa994f.collapseButtonIsCollapsed_0faa994f{-webkit-transform:rotate(0);transform:rotate(0)}.cell_0faa994f .nearIcon_0faa994f{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";opacity:1}html[dir=ltr] .cell_0faa994f .nearIcon_0faa994f{padding-right:4px}html[dir=rtl] .cell_0faa994f .nearIcon_0faa994f{padding-left:4px}.cell_0faa994f .filterChevron_0faa994f{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";vertical-align:middle}html[dir=ltr] .cell_0faa994f .filterChevron_0faa994f{padding-left:4px}html[dir=rtl] .cell_0faa994f .filterChevron_0faa994f{padding-right:4px}.sizingOverlay_0faa994f{position:absolute;left:0;top:0;right:0;bottom:0;cursor:ew-resize;background:rgba(255,255,255,0)}html[dir=ltr] .cell_0faa994f .collapseButton_0faa994f{padding-right:0}html[dir=rtl] .cell_0faa994f .collapseButton_0faa994f{padding-left:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=DetailsHeader.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Enum to describe how a particular column header behaves.... This enum is used to * to specify the property IColumn:columnActionsMode. * If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable */ var ColumnActionsMode; (function (ColumnActionsMode) { /** * Renders the column header as disabled. */ ColumnActionsMode[ColumnActionsMode["disabled"] = 0] = "disabled"; /** * Renders the column header is clickable. */ ColumnActionsMode[ColumnActionsMode["clickable"] = 1] = "clickable"; /** * Renders the column header ias clickable and displays the dropdown cheveron. */ ColumnActionsMode[ColumnActionsMode["hasDropdown"] = 2] = "hasDropdown"; })(ColumnActionsMode = exports.ColumnActionsMode || (exports.ColumnActionsMode = {})); var ConstrainMode; (function (ConstrainMode) { /** If specified, lets the content grow which allows the page to manage scrolling. */ ConstrainMode[ConstrainMode["unconstrained"] = 0] = "unconstrained"; /** * If specified, constrains the list to the given layout space. */ ConstrainMode[ConstrainMode["horizontalConstrained"] = 1] = "horizontalConstrained"; })(ConstrainMode = exports.ConstrainMode || (exports.ConstrainMode = {})); var DetailsListLayoutMode; (function (DetailsListLayoutMode) { /** * Lets the user resize columns and makes not attempt to fit them. */ DetailsListLayoutMode[DetailsListLayoutMode["fixedColumns"] = 0] = "fixedColumns"; /** * Manages which columns are visible, tries to size them according to their min/max rules and drops * off columns that can't fit and have isCollapsable set. */ DetailsListLayoutMode[DetailsListLayoutMode["justified"] = 1] = "justified"; })(DetailsListLayoutMode = exports.DetailsListLayoutMode || (exports.DetailsListLayoutMode = {})); var CheckboxVisibility; (function (CheckboxVisibility) { /** * Visible on hover. */ CheckboxVisibility[CheckboxVisibility["onHover"] = 0] = "onHover"; /** * Visible always. */ CheckboxVisibility[CheckboxVisibility["always"] = 1] = "always"; /** * Hide checkboxes. */ CheckboxVisibility[CheckboxVisibility["hidden"] = 2] = "hidden"; })(CheckboxVisibility = exports.CheckboxVisibility || (exports.CheckboxVisibility = {})); }); //# sourceMappingURL=DetailsList.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 | 2 2 2 1 2 2 2 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../DetailsList/DetailsList.Props", "../DetailsList/DetailsHeader", "../DetailsList/DetailsRow", "../../FocusZone", "../../GroupedList", "../../List", "../../utilities/decorators/withViewport", "../../utilities/selection/index", "../../utilities/dragdrop/DragDropHelper", "./DetailsList.scss"], function (require, exports, React, Utilities_1, DetailsList_Props_1, DetailsHeader_1, DetailsRow_1, FocusZone_1, GroupedList_1, List_1, withViewport_1, index_1, DragDropHelper_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MIN_COLUMN_WIDTH = 100; // this is the global min width
var CHECKBOX_WIDTH = 36;
var GROUP_EXPAND_WIDTH = 36;
var DEFAULT_INNER_PADDING = 16;
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
var DetailsList = (function (_super) {
__extends(DetailsList, _super);
function DetailsList(props) {
var _this = _super.call(this, props) || this;
_this._activeRows = {};
_this._columnOverrides = {};
_this._onColumnIsSizingChanged = _this._onColumnIsSizingChanged.bind(_this);
_this._onColumnResized = _this._onColumnResized.bind(_this);
_this._onColumnAutoResized = _this._onColumnAutoResized.bind(_this);
_this._onRowDidMount = _this._onRowDidMount.bind(_this);
_this._onRowWillUnmount = _this._onRowWillUnmount.bind(_this);
_this._onToggleCollapse = _this._onToggleCollapse.bind(_this);
_this._onActiveRowChanged = _this._onActiveRowChanged.bind(_this);
_this._onHeaderKeyDown = _this._onHeaderKeyDown.bind(_this);
_this._onContentKeyDown = _this._onContentKeyDown.bind(_this);
_this._onRenderCell = _this._onRenderCell.bind(_this);
_this._onGroupExpandStateChanged = _this._onGroupExpandStateChanged.bind(_this);
_this.state = {
lastWidth: 0,
adjustedColumns: _this._getAdjustedColumns(props),
layoutMode: props.layoutMode,
isSizing: false,
isDropping: false,
isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed,
isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed
};
_this._selection = props.selection || new index_1.Selection({ onSelectionChanged: null, getKey: props.getKey });
_this._selection.setItems(props.items, false);
_this._dragDropHelper = props.dragDropEvents ? new DragDropHelper_1.DragDropHelper({
selection: _this._selection,
minimumPixelsForDrag: props.minimumPixelsForDrag
}) : null;
_this._initialFocusedIndex = props.initialFocusedIndex;
return _this;
}
DetailsList.prototype.componentWillUnmount = function () {
if (this._dragDropHelper) {
this._dragDropHelper.dispose();
}
};
DetailsList.prototype.componentDidUpdate = function (prevProps, prevState) {
if (this.props.onDidUpdate) {
this.props.onDidUpdate(this);
}
};
DetailsList.prototype.componentWillReceiveProps = function (newProps) {
var _a = this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, selectionMode = _a.selectionMode, columns = _a.columns, viewport = _a.viewport;
var layoutMode = this.state.layoutMode;
var shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
var shouldForceUpdates = false;
if (newProps.layoutMode !== this.props.layoutMode) {
layoutMode = newProps.layoutMode;
this.setState({ layoutMode: layoutMode });
shouldForceUpdates = true;
}
if (shouldResetSelection) {
this._initialFocusedIndex = newProps.initialFocusedIndex;
}
if (newProps.items !== items) {
this._selection.setItems(newProps.items, shouldResetSelection);
}
if (newProps.checkboxVisibility !== checkboxVisibility ||
newProps.columns !== columns ||
newProps.viewport.width !== viewport.width) {
shouldForceUpdates = true;
}
this._adjustColumns(newProps, true, layoutMode);
if (newProps.selectionMode !== selectionMode) {
shouldForceUpdates = true;
}
if (shouldForceUpdates) {
this._forceListUpdates();
}
};
DetailsList.prototype.render = function () {
var _this = this;
var _a = this.props, ariaLabelForListHeader = _a.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, className = _a.className, checkboxVisibility = _a.checkboxVisibility, constrainMode = _a.constrainMode, dragDropEvents = _a.dragDropEvents, groups = _a.groups, groupProps = _a.groupProps, items = _a.items, isHeaderVisible = _a.isHeaderVisible, onItemInvoked = _a.onItemInvoked, onItemContextMenu = _a.onItemContextMenu, onColumnHeaderClick = _a.onColumnHeaderClick, onColumnHeaderContextMenu = _a.onColumnHeaderContextMenu, selectionMode = _a.selectionMode, selectionPreservedOnEmptyClick = _a.selectionPreservedOnEmptyClick, ariaLabel = _a.ariaLabel, ariaLabelForGrid = _a.ariaLabelForGrid, rowElementEventMap = _a.rowElementEventMap, _b = _a.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = _a.getKey;
var _c = this.state, adjustedColumns = _c.adjustedColumns, isCollapsed = _c.isCollapsed, layoutMode = _c.layoutMode, isSizing = _c.isSizing, isSomeGroupExpanded = _c.isSomeGroupExpanded;
var _d = this, selection = _d._selection, dragDropHelper = _d._dragDropHelper;
var groupNestingDepth = this._getGroupNestingDepth();
var additionalListProps = {
renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND,
getKey: getKey
};
var selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none; // for SelectionMode.none
if (selectionMode === index_1.SelectionMode.single) {
selectAllVisibility = DetailsHeader_1.SelectAllVisibility.hidden;
}
if (selectionMode === index_1.SelectionMode.multiple) {
// if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups
var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;
if (isCollapsedGroupSelectVisible === undefined) {
isCollapsedGroupSelectVisible = true;
}
var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;
selectAllVisibility = isSelectAllVisible ? DetailsHeader_1.SelectAllVisibility.visible : DetailsHeader_1.SelectAllVisibility.hidden;
}
if (checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.hidden) {
selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none;
}
return (
// If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
// with JAWS.
React.createElement("div", __assign({ ref: 'root', className: Utilities_1.css('ms-DetailsList', styles.root, className, (_e = {
'is-fixed': layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns
},
_e['is-horizontalConstrained ' + styles.rootIsHorizontalConstrained] = constrainMode === DetailsList_Props_1.ConstrainMode.horizontalConstrained,
_e)), "data-automationid": 'DetailsList', "data-is-scrollable": 'false', "aria-label": ariaLabel }, (shouldApplyApplicationRole ? { role: 'application' } : {})),
React.createElement("div", { role: 'grid', "aria-label": ariaLabelForGrid },
React.createElement("div", { onKeyDown: this._onHeaderKeyDown, role: 'presentation' }, isHeaderVisible && (React.createElement(DetailsHeader_1.DetailsHeader, { ref: 'header', selectionMode: selectionMode, layoutMode: layoutMode, selection: selection, columns: adjustedColumns, onColumnClick: onColumnHeaderClick, onColumnContextMenu: onColumnHeaderContextMenu, onColumnResized: this._onColumnResized, onColumnIsSizingChanged: this._onColumnIsSizingChanged, onColumnAutoResized: this._onColumnAutoResized, groupNestingDepth: groupNestingDepth, isAllCollapsed: isCollapsed, onToggleCollapseAll: this._onToggleCollapse, ariaLabel: ariaLabelForListHeader, ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox, selectAllVisibility: selectAllVisibility }))),
React.createElement("div", { ref: 'contentContainer', onKeyDown: this._onContentKeyDown, role: 'presentation' },
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', className: styles.focusZone, direction: FocusZone_1.FocusZoneDirection.vertical, isInnerZoneKeystroke: function (ev) { return (ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)); }, onActiveElementChanged: this._onActiveRowChanged },
React.createElement(index_1.SelectionZone, { ref: 'selectionZone', selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu }, groups ? (React.createElement(GroupedList_1.GroupedList, { groups: groups, groupProps: groupProps, items: items, onRenderCell: this._onRenderCell, selection: selection, selectionMode: selectionMode, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: this._onGroupExpandStateChanged, ref: 'groupedList' })) : (React.createElement(List_1.List, __assign({ role: null, items: items, onRenderCell: function (item, itemIndex) { return _this._onRenderCell(0, item, itemIndex); } }, additionalListProps, { ref: 'list' })))))))));
var _e;
};
DetailsList.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this._forceListUpdates();
};
DetailsList.prototype._onRenderRow = function (props, defaultRender) {
return React.createElement(DetailsRow_1.DetailsRow, __assign({}, props));
};
DetailsList.prototype._onRenderCell = function (nestingDepth, item, index) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.rowElementEventMap, onRenderMissingItem = _a.onRenderMissingItem, onRenderItemColumn = _a.onRenderItemColumn, _b = _a.onRenderRow, onRenderRow = _b === void 0 ? this._onRenderRow : _b, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel;
var selection = this._selection;
var dragDropHelper = this._dragDropHelper;
var columns = this.state.adjustedColumns;
if (!item) {
if (onRenderMissingItem) {
onRenderMissingItem(index);
}
return null;
}
return onRenderRow({
item: item,
itemIndex: index,
columns: columns,
groupNestingDepth: nestingDepth,
selectionMode: selectionMode,
selection: selection,
onDidMount: this._onRowDidMount,
onWillUnmount: this._onRowWillUnmount,
onRenderItemColumn: onRenderItemColumn,
eventsToRegister: eventsToRegister,
dragDropEvents: dragDropEvents,
dragDropHelper: dragDropHelper,
viewport: viewport,
checkboxVisibility: checkboxVisibility,
getRowAriaLabel: getRowAriaLabel,
checkButtonAriaLabel: checkButtonAriaLabel
}, this._onRenderRow);
};
DetailsList.prototype._onGroupExpandStateChanged = function (isSomeGroupExpanded) {
this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });
};
DetailsList.prototype._onColumnIsSizingChanged = function (column, isSizing) {
this.setState({ isSizing: isSizing });
};
DetailsList.prototype._onHeaderKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.down) {
if (this.refs.focusZone && this.refs.focusZone.focus()) {
ev.preventDefault();
ev.stopPropagation();
}
}
};
DetailsList.prototype._onContentKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.up) {
if (this.refs.header && this.refs.header.focus()) {
ev.preventDefault();
ev.stopPropagation();
}
}
};
DetailsList.prototype._getGroupNestingDepth = function () {
var groups = this.props.groups;
var level = 0;
var groupsInLevel = groups;
while (groupsInLevel && groupsInLevel.length > 0) {
level++;
groupsInLevel = groupsInLevel[0].children;
}
return level;
};
DetailsList.prototype._onRowDidMount = function (row) {
var onRowDidMount = this.props.onRowDidMount;
var index = row.props.itemIndex;
this._activeRows[index] = row; // this is used for column auto resize
// Set focus to the row if it should receive focus.
if (this._initialFocusedIndex !== undefined && index === this._initialFocusedIndex) {
if (this.refs.selectionZone) {
this.refs.selectionZone.ignoreNextFocus();
}
row.focus();
delete this._initialFocusedIndex;
}
if (onRowDidMount) {
onRowDidMount(row.props.item, index);
}
};
DetailsList.prototype._onRowWillUnmount = function (row) {
var onRowWillUnmount = this.props.onRowWillUnmount;
var index = row.props.itemIndex;
delete this._activeRows[index];
this._events.off(row.refs.root);
if (onRowWillUnmount) {
onRowWillUnmount(row.props.item, index);
}
};
DetailsList.prototype._onToggleCollapse = function (collapsed) {
this.setState({
isCollapsed: collapsed
});
if (this.refs.groupedList) {
this.refs.groupedList.toggleCollapseAll(collapsed);
}
};
DetailsList.prototype._forceListUpdates = function () {
if (this.refs.groupedList) {
this.refs.groupedList.forceUpdate();
}
if (this.refs.list) {
this.refs.list.forceUpdate();
}
};
DetailsList.prototype._adjustColumns = function (newProps, forceUpdate, layoutMode) {
var adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, layoutMode);
var viewportWidth = this.props.viewport.width;
if (adjustedColumns) {
this.setState({
adjustedColumns: adjustedColumns,
lastWidth: viewportWidth,
layoutMode: layoutMode
});
}
};
/** Returns adjusted columns, given the viewport size and layout mode. */
DetailsList.prototype._getAdjustedColumns = function (newProps, forceUpdate, layoutMode) {
var _this = this;
var newColumns = newProps.columns, newItems = newProps.items, viewportWidth = newProps.viewport.width, selectionMode = newProps.selectionMode;
if (layoutMode === undefined) {
layoutMode = newProps.layoutMode;
}
var columns = this.props ? this.props.columns : [];
var lastWidth = this.state ? this.state.lastWidth : -1;
var lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined;
if (viewportWidth !== undefined) {
if (!forceUpdate &&
lastWidth === viewportWidth &&
lastSelectionMode === selectionMode &&
(!columns || newColumns === columns)) {
return;
}
}
else {
viewportWidth = this.props.viewport.width;
}
newColumns = newColumns || buildColumns(newItems, true);
var adjustedColumns;
if (layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns) {
adjustedColumns = this._getFixedColumns(newColumns);
}
else {
adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);
}
// Preserve adjusted column calculated widths.
adjustedColumns.forEach(function (column) {
var overrides = _this._columnOverrides[column.key] = _this._columnOverrides[column.key] || {};
overrides.calculatedWidth = column.calculatedWidth;
});
return adjustedColumns;
};
/** Builds a set of columns based on the given columns mixed with the current overrides. */
DetailsList.prototype._getFixedColumns = function (newColumns) {
var _this = this;
return newColumns.map(function (column) {
var newColumn = Utilities_1.assign({}, column, _this._columnOverrides[column.key]);
if (!newColumn.calculatedWidth) {
newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;
}
return newColumn;
});
};
/** Builds a set of columns to fix within the viewport width. */
DetailsList.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) {
var selectionMode = props.selectionMode, groups = props.groups;
var outerPadding = DEFAULT_INNER_PADDING;
var rowCheckWidth = (selectionMode !== index_1.SelectionMode.none) ? CHECKBOX_WIDTH : 0;
var groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
var totalWidth = 0; // offset because we have one less inner padding.
var availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
var adjustedColumns = newColumns.map(function (column, i) {
var newColumn = Utilities_1.assign({}, column, {
calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH
});
totalWidth += newColumn.calculatedWidth + (i > 0 ? DEFAULT_INNER_PADDING : 0);
return newColumn;
});
var lastIndex = adjustedColumns.length - 1;
// Remove collapsable columns.
while (lastIndex > 1 && totalWidth > availableWidth) {
var column = adjustedColumns[lastIndex];
if (column.isCollapsable) {
totalWidth -= column.calculatedWidth + DEFAULT_INNER_PADDING;
adjustedColumns.splice(lastIndex, 1);
}
lastIndex--;
}
// Then expand columns starting at the beginning, until we've filled the width.
for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {
var column = adjustedColumns[i];
var maxWidth = column.maxWidth;
var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;
var spaceLeft = availableWidth - totalWidth;
var increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;
// Add remaining space to the last column.
if (i === (adjustedColumns.length - 1)) {
increment = spaceLeft;
}
column.calculatedWidth += increment;
totalWidth += increment;
}
// Mark the last column as not resizable to avoid extra scrolling issues.
if (adjustedColumns.length) {
adjustedColumns[adjustedColumns.length - 1].isResizable = false;
}
return adjustedColumns;
};
DetailsList.prototype._onColumnResized = function (resizingColumn, newWidth) {
var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
if (this.props.onColumnResize) {
this.props.onColumnResize(resizingColumn, newCalculatedWidth);
}
this._columnOverrides[resizingColumn.key].calculatedWidth = newCalculatedWidth;
this._adjustColumns(this.props, true, DetailsList_Props_1.DetailsListLayoutMode.fixedColumns);
this._forceListUpdates();
};
/**
* Callback function when double clicked on the details header column resizer
* which will measure the column cells of all the active rows and resize the
* column to the max cell width.
*
* @private
* @param {IColumn} column (double clicked column definition)
* @param {number} columnIndex (double clicked column index)
* @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
*/
DetailsList.prototype._onColumnAutoResized = function (column, columnIndex) {
var _this = this;
var max = 0;
var count = 0;
var totalCount = Object.keys(this._activeRows).length;
for (var key in this._activeRows) {
if (this._activeRows.hasOwnProperty(key)) {
var currentRow = this._activeRows[key];
currentRow.measureCell(columnIndex, function (width) {
max = Math.max(max, width);
count++;
if (count === totalCount) {
_this._onColumnResized(column, max);
}
});
}
}
};
/**
* Call back function when an element in FocusZone becomes active. It will transalate it into item
* and call onActiveItemChanged callback if specified.
*
* @private
* @param {el} row element that became active in Focus Zone
* @param {ev} focus event from Focus Zone
*/
DetailsList.prototype._onActiveRowChanged = function (el, ev) {
var _a = this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged;
if (!onActiveItemChanged || !el) {
return;
}
var index = Number(el.getAttribute('data-item-index'));
if (index >= 0) {
onActiveItemChanged(items[index], index, ev);
}
};
;
return DetailsList;
}(Utilities_1.BaseComponent));
DetailsList.defaultProps = {
layoutMode: DetailsList_Props_1.DetailsListLayoutMode.justified,
selectionMode: index_1.SelectionMode.multiple,
constrainMode: DetailsList_Props_1.ConstrainMode.horizontalConstrained,
checkboxVisibility: DetailsList_Props_1.CheckboxVisibility.onHover,
isHeaderVisible: true
};
__decorate([
Utilities_1.autobind
], DetailsList.prototype, "_onRenderRow", null);
DetailsList = __decorate([
withViewport_1.withViewport
], DetailsList);
exports.DetailsList = DetailsList;
function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline) {
var columns = [];
if (items && items.length) {
var firstItem = items[0];
var isFirstColumn = true;
for (var propName in firstItem) {
if (firstItem.hasOwnProperty(propName)) {
columns.push({
key: propName,
name: propName,
fieldName: propName,
minWidth: MIN_COLUMN_WIDTH,
maxWidth: 300,
isCollapsable: !!columns.length,
isMultiline: (isMultiline === undefined) ? false : isMultiline,
isSorted: sortedColumnKey === propName,
isSortedDescending: !!isSortedDescending,
isRowHeader: false,
columnActionsMode: DetailsList_Props_1.ColumnActionsMode.clickable,
isResizable: canResizeColumns,
onColumnClick: onColumnClick,
isGrouped: groupedColumnKey === propName
});
isFirstColumn = false;
}
}
}
return columns;
}
exports.buildColumns = buildColumns;
});
//# sourceMappingURL=DetailsList.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_a5b97522', focusZone: 'focusZone_a5b97522', rootIsHorizontalConstrained: 'rootIsHorizontalConstrained_a5b97522', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_a5b97522{position:relative;font-size:12px}.focusZone_a5b97522{display:inline-block;vertical-align:top;min-width:100%;min-height:1px}.rootIsHorizontalConstrained_a5b97522{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.root_a5b97522 .ms-List-cell{min-height:38px;word-break:break-word}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=DetailsList.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "office-ui-fabric-react/lib/Link", "@uifabric/example-app-base", "./examples/DetailsList.Basic.Example", "./examples/DetailsList.CustomColumns.Example", "./examples/DetailsList.CustomRows.Example", "./examples/DetailsList.CustomGroupHeaders.Example", "./examples/DetailsList.Advanced.Example", "./examples/DetailsList.Grouped.Example", "./examples/DetailsList.DragDrop.Example"], function (require, exports, React, Link_1, example_app_base_1, DetailsList_Basic_Example_1, DetailsList_CustomColumns_Example_1, DetailsList_CustomRows_Example_1, DetailsList_CustomGroupHeaders_Example_1, DetailsList_Advanced_Example_1, DetailsList_Grouped_Example_1, DetailsList_DragDrop_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DetailsListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
var DetailsListCustomColumnsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx');
var DetailsListCustomRowsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx');
var DetailsListCustomGroupHeadersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx');
var DetailsListAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx');
var DetailsListGroupedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx');
var DetailsListDragDropExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx');
var DetailsListPage = (function (_super) {
__extends(DetailsListPage, _super);
function DetailsListPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DetailsListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DetailsList', componentName: 'DetailsListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListBasicExampleCode },
React.createElement(DetailsList_Basic_Example_1.DetailsListBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Grouped DetailsList', isOptIn: true, code: DetailsListGroupedExampleCode },
React.createElement(DetailsList_Grouped_Example_1.DetailsListGroupedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item columns with sorting', isOptIn: true, code: DetailsListCustomColumnsExampleCode },
React.createElement(DetailsList_CustomColumns_Example_1.DetailsListCustomColumnsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item rows', isOptIn: true, code: DetailsListCustomRowsExampleCode },
React.createElement(DetailsList_CustomRows_Example_1.DetailsListCustomRowsExample, null)),
",",
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom group headers', isOptIn: true, code: DetailsListCustomGroupHeadersExampleCode },
React.createElement(DetailsList_CustomGroupHeaders_Example_1.DetailsListCustomGroupHeadersExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Advanced DetailsList of 5000 items, variable row heights', isOptIn: true, code: DetailsListAdvancedExampleCode },
React.createElement(DetailsList_Advanced_Example_1.DetailsListAdvancedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Drag and Drop DetailsList with 10 items', isOptIn: true, code: DetailsListDragDropExampleCode },
React.createElement(DetailsList_DragDrop_Example_1.DetailsListDragDropExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null,
"DetailsList is a derivative of the ",
React.createElement(Link_1.Link, { href: '#/examples/list' }, "List"),
" component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse."),
React.createElement("p", null, "Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison."),
React.createElement("p", null, "DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column\u2019s data. If there are multiple lines of text in a column, consider the variable row height variant.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display content."),
React.createElement("li", null, "Provide useful columns of metadata."),
React.createElement("li", null, "Display columns in order of importance left to right or right to left depending on the standards of the culture."),
React.createElement("li", null, "Give columns ample default width to display information."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display commands or settings."),
React.createElement("li", null, "Overload the view with too many columns that require excessive horizontal scrolling."),
React.createElement("li", null, "Make columns so narrow that it truncates the information in typical cases."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return DetailsListPage;
}(React.Component));
exports.DetailsListPage = DetailsListPage;
});
//# sourceMappingURL=DetailsListPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./DetailsList.Props", "./DetailsRowCheck", "../GroupedList/GroupSpacer", "./DetailsRowFields", "../../FocusZone", "../../utilities/selection/interfaces", "./DetailsRow.scss"], function (require, exports, React, Utilities_1, DetailsList_Props_1, DetailsRowCheck_1, GroupSpacer_1, DetailsRowFields_1, FocusZone_1, interfaces_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var DetailsRow = (function (_super) {
__extends(DetailsRow, _super);
function DetailsRow(props) {
var _this = _super.call(this, props) || this;
_this.state = {
selectionState: _this._getSelectionState(props),
columnMeasureInfo: null,
isDropping: false,
groupNestingDepth: props.groupNestingDepth
};
_this._hasSetFocus = false;
_this._droppingClassNames = '';
_this._updateDroppingState = _this._updateDroppingState.bind(_this);
return _this;
}
DetailsRow.prototype.componentDidMount = function () {
var dragDropHelper = this.props.dragDropHelper;
if (dragDropHelper) {
this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions());
}
this._events.on(this.props.selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
if (this.props.onDidMount && this.props.item) {
// If the item appears later, we should wait for it before calling this method.
this._hasMounted = true;
this.props.onDidMount(this);
}
};
DetailsRow.prototype.componentDidUpdate = function (previousProps) {
var state = this.state;
var _a = this.props, item = _a.item, onDidMount = _a.onDidMount;
var columnMeasureInfo = state.columnMeasureInfo;
if (this.props.itemIndex !== previousProps.itemIndex ||
this.props.item !== previousProps.item ||
this.props.dragDropHelper !== previousProps.dragDropHelper) {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions());
}
}
if (columnMeasureInfo && columnMeasureInfo.index >= 0) {
var newWidth = this.refs.cellMeasurer.getBoundingClientRect().width;
columnMeasureInfo.onMeasureDone(newWidth);
this.setState({
columnMeasureInfo: null
});
}
if (item && onDidMount && !this._hasMounted) {
this._hasMounted = true;
onDidMount(this);
}
};
DetailsRow.prototype.componentWillUnmount = function () {
var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount;
// Only call the onWillUnmount callback if we have an item.
if (onWillUnmount && item) {
onWillUnmount(this);
}
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
};
DetailsRow.prototype.componentWillReceiveProps = function (newProps) {
this.setState({
selectionState: this._getSelectionState(newProps),
groupNestingDepth: newProps.groupNestingDepth
});
};
DetailsRow.prototype.render = function () {
var _a = this.props, columns = _a.columns, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, _b = _a.onRenderCheck, onRenderCheck = _b === void 0 ? this._onRenderCheck : _b, onRenderItemColumn = _a.onRenderItemColumn, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel, selection = _a.selection;
var _c = this.state, _d = _c.selectionState, isSelected = _d.isSelected, anySelected = _d.anySelected, columnMeasureInfo = _c.columnMeasureInfo, isDropping = _c.isDropping, groupNestingDepth = _c.groupNestingDepth;
var isDraggable = Boolean(dragDropEvents && dragDropEvents.canDrag && dragDropEvents.canDrag(item));
var droppingClassName = isDropping ? (this._droppingClassNames ? this._droppingClassNames : DEFAULT_DROPPING_CSS_CLASS) : '';
var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : null;
var canSelect = selection.canSelectItem(item);
var isContentUnselectable = selectionMode === interfaces_1.SelectionMode.multiple;
return (React.createElement("div", { ref: 'root', role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsRow ms-u-fadeIn400', styles.root, droppingClassName, (_e = {},
_e['is-contentUnselectable ' + styles.rootIsContentUnselectable] = isContentUnselectable,
_e['is-selected ' + styles.rootIsSelected] = isSelected,
_e['is-check-visible ' + styles.rootIsCheckVisible] = checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.always,
_e)), "data-is-focusable": true, "data-selection-index": itemIndex, "data-item-index": itemIndex, "data-is-draggable": isDraggable, draggable: isDraggable, "data-automationid": 'DetailsRow', style: { minWidth: viewport ? viewport.width : 0 }, "aria-selected": isSelected },
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
(selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_Props_1.CheckboxVisibility.hidden) && (React.createElement("span", { role: 'gridcell' }, onRenderCheck({
isSelected: isSelected,
anySelected: anySelected,
ariaLabel: checkButtonAriaLabel,
canSelect: canSelect
}))),
GroupSpacer_1.GroupSpacer({ count: groupNestingDepth }),
item && (React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: columns, item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn })),
columnMeasureInfo && (React.createElement("span", { className: Utilities_1.css('ms-DetailsRow-cellMeasurer ms-DetailsRow-cell', styles.cellMeasurer, styles.cell), ref: 'cellMeasurer' },
React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn }))))));
var _e;
};
/**
* measure cell at index. and call the call back with the measured cell width when finish measure
*
* @param {number} index (the cell index)
* @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
*/
DetailsRow.prototype.measureCell = function (index, onMeasureDone) {
var column = Utilities_1.assign({}, this.props.columns[index]);
column.minWidth = 0;
column.maxWidth = 999999;
delete column.calculatedWidth;
this.setState({
columnMeasureInfo: {
index: index,
column: column,
onMeasureDone: onMeasureDone
}
});
};
DetailsRow.prototype.focus = function () {
if (this.refs && this.refs.root) {
this.refs.root.tabIndex = 0;
this.refs.root.focus();
}
};
DetailsRow.prototype._onRenderCheck = function (props) {
return React.createElement(DetailsRowCheck_1.DetailsRowCheck, __assign({}, props));
};
DetailsRow.prototype._getSelectionState = function (props) {
var itemIndex = props.itemIndex, selection = props.selection;
return {
isSelected: selection.isIndexSelected(itemIndex),
anySelected: selection.getSelectedCount() > 0
};
};
DetailsRow.prototype._onSelectionChanged = function () {
var selectionState = this._getSelectionState(this.props);
if (!Utilities_1.shallowCompare(selectionState, this.state.selectionState)) {
this.setState({
selectionState: selectionState
});
}
};
DetailsRow.prototype._getRowDragDropOptions = function () {
var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
var options = {
eventMap: eventsToRegister,
selectionIndex: itemIndex,
context: { data: item, index: itemIndex },
canDrag: dragDropEvents.canDrag,
canDrop: dragDropEvents.canDrop,
onDragStart: dragDropEvents.onDragStart,
updateDropState: this._updateDroppingState,
onDrop: dragDropEvents.onDrop,
onDragEnd: dragDropEvents.onDragEnd,
};
return options;
};
/**
* update isDropping state based on the input value, which is used to change style during drag and drop
*
* when change to true, that means drag enter. we will add default dropping class name
* or the custom dropping class name (return result from onDragEnter) to the root elemet.
*
* when change to false, that means drag leave. we will remove the dropping class name from root element.
*
* @private
* @param {boolean} newValue (new isDropping state value)
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
*/
DetailsRow.prototype._updateDroppingState = function (newValue, event) {
var _a = this.state, selectionState = _a.selectionState, isDropping = _a.isDropping;
var _b = this.props, dragDropEvents = _b.dragDropEvents, item = _b.item;
if (!newValue) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(item, event);
}
}
else {
if (dragDropEvents.onDragEnter) {
this._droppingClassNames = dragDropEvents.onDragEnter(item, event);
}
}
if (isDropping !== newValue) {
this.setState({ selectionState: selectionState, isDropping: newValue });
}
};
return DetailsRow;
}(Utilities_1.BaseComponent));
exports.DetailsRow = DetailsRow;
});
//# sourceMappingURL=DetailsRow.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_9527382d', rootIsSelected: 'rootIsSelected_9527382d', rootIsContentUnselectable: 'rootIsContentUnselectable_9527382d', cell: 'cell_9527382d', isMultiline: 'isMultiline_9527382d', fields: 'fields_9527382d', check: 'check_9527382d', checkDisabled: 'checkDisabled_9527382d', rootIsCheckVisible: 'rootIsCheckVisible_9527382d', cellMeasurer: 'cellMeasurer_9527382d', checkSpacer: 'checkSpacer_9527382d', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_9527382d{display:inline-block;min-width:100%;min-height:36px;margin:1px 0;vertical-align:top;white-space:nowrap;padding:0;box-sizing:border-box;background:0 0;border:none;vertical-align:top;line-height:16px}.root_9527382d::-moz-focus-inner{border:0}.root_9527382d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_9527382d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_9527382d{text-align:left}html[dir=rtl] .root_9527382d{text-align:right}.root_9527382d:hover{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsSelected_9527382d{background:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.rootIsSelected_9527382d:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.rootIsContentUnselectable_9527382d{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.cell_9527382d{display:inline-block;position:relative;box-sizing:border-box;padding:10px 0;margin:0 8px;min-height:36px;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell_9527382d>button{max-width:100%}.isMultiline_9527382d{white-space:normal;word-break:break-word;text-overflow:clip}.fields_9527382d{display:inline-block}.check_9527382d{display:inline-block;cursor:default;padding:6px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;opacity:0}.check_9527382d::-moz-focus-inner{border:0}.check_9527382d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_9527382d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.checkDisabled_9527382d{visibility:hidden}.rootIsCheckVisible_9527382d .check_9527382d,.rootIsSelected_9527382d .check_9527382d,.root_9527382d:hover .check_9527382d{opacity:1}.cellMeasurer_9527382d .cell_9527382d{overflow:visible;white-space:nowrap}.checkSpacer_9527382d{display:inline-block;height:20px;width:20px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=DetailsRow.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 2 | define(["require", "exports", "react", "../../Utilities", "../../Check", "./DetailsRow.scss"], function (require, exports, React, Utilities_1, Check_1, styles) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.DetailsRowCheck = function (props) { var selected = props.isSelected || props.selected; return (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsRow-check', styles.check, (_a = {}, _a[styles.checkDisabled] = !props.canSelect, _a['ms-DetailsRow-check--isDisabled'] = !props.canSelect, _a)), role: 'button', "aria-pressed": selected, "data-selection-toggle": true, "data-automationid": 'DetailsRowCheck', "aria-label": props.ariaLabel }, React.createElement(Check_1.Check, { checked: selected }))); var _a; }; }); //# sourceMappingURL=DetailsRowCheck.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./DetailsRow.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DetailsRowFields = (function (_super) {
__extends(DetailsRowFields, _super);
function DetailsRowFields(props) {
var _this = _super.call(this) || this;
_this.state = _this._getState(props);
return _this;
}
DetailsRowFields.prototype.componentWillReceiveProps = function (newProps) {
this.setState(this._getState(newProps));
};
DetailsRowFields.prototype.render = function () {
var columns = this.props.columns;
var cellContent = this.state.cellContent;
return (React.createElement("div", { className: Utilities_1.css('ms-DetailsRow-fields', styles.fields), "data-automationid": 'DetailsRowFields' }, columns.map(function (column, columnIndex) {
return (React.createElement("div", { key: columnIndex, role: column.isRowHeader ? 'rowheader' : 'gridcell', className: Utilities_1.css('ms-DetailsRow-cell', styles.cell, column.className, (_a = {
'is-multiline': column.isMultiline
},
_a[styles.isMultiline] = column.isMultiline,
_a)), style: { width: column.calculatedWidth }, "data-automationid": 'DetailsRowCell', "data-automation-key": column.key }, cellContent[columnIndex]));
var _a;
})));
};
DetailsRowFields.prototype._getState = function (props) {
var _this = this;
var item = props.item, itemIndex = props.itemIndex, onRenderItemColumn = props.onRenderItemColumn;
return {
cellContent: props.columns.map(function (column) {
var cellContent;
try {
var render = column.onRender || onRenderItemColumn;
cellContent = render ? render(item, itemIndex, column) : _this._getCellText(item, column);
}
catch (e) { }
return cellContent;
})
};
};
DetailsRowFields.prototype._getCellText = function (item, column) {
var value = (item && column && column.fieldName) ? item[column.fieldName] : '';
if (value === null || value === undefined) {
value = '';
}
return value;
};
return DetailsRowFields;
}(Utilities_1.BaseComponent));
exports.DetailsRowFields = DetailsRowFields;
});
//# sourceMappingURL=DetailsRowFields.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 1 | define(["require", "exports", "../../utilities/selection/index", "./DetailsList", "./DetailsList.Props", "./DetailsRow", "./DetailsRowCheck"], function (require, exports, index_1, DetailsList_1, DetailsList_Props_1, DetailsRow_1, DetailsRowCheck_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(index_1); __export(DetailsList_1); __export(DetailsList_Props_1); __export(DetailsRow_1); __export(DetailsRowCheck_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Dialog.Props.js | 14.29% | (1 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 14.29% | (1 / 7) | |
| Dialog.js | 14.04% | (8 / 57) | 18.52% | (10 / 54) | 7.14% | (1 / 14) | 16% | (8 / 50) | |
| Dialog.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DialogFooter.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 9.09% | (1 / 11) | 28.57% | (6 / 21) | |
| DialogPage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 22.22% | (2 / 9) | 0% | (0 / 2) | 0% | (0 / 2) | 28.57% | (2 / 7) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DialogType; (function (DialogType) { /** Standard dialog */ DialogType[DialogType["normal"] = 0] = "normal"; /** Dialog with large header banner */ DialogType[DialogType["largeHeader"] = 1] = "largeHeader"; /** Dialog with an 'x' close button in the upper-right corner */ DialogType[DialogType["close"] = 2] = "close"; })(DialogType = exports.DialogType || (exports.DialogType = {})); }); //# sourceMappingURL=Dialog.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./Dialog.Props", "../../Modal", "../../Button", "./DialogFooter", "../../utilities/decorators/withResponsiveMode", "./Dialog.scss"], function (require, exports, React, Utilities_1, Dialog_Props_1, Modal_1, Button_1, DialogFooter_1, withResponsiveMode_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Dialog = (function (_super) {
__extends(Dialog, _super);
function Dialog(props) {
var _this = _super.call(this, props) || this;
_this.state = {
id: Utilities_1.getId('Dialog'),
};
return _this;
}
Dialog.prototype.render = function () {
var _a = this.props, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type;
var id = this.state.id;
var subTextContent;
var dialogClassName = Utilities_1.css(this.props.className, (_b = {},
_b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === Dialog_Props_1.DialogType.largeHeader,
_b['ms-Dialog--close ' + styles.isClose] = type === Dialog_Props_1.DialogType.close,
_b));
var containerClassName = Utilities_1.css(this.props.containerClassName, styles.main);
var groupings = this._groupChildren();
if (subText) {
subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText);
}
return (React.createElement(Modal_1.Modal, { className: dialogClassName, containerClassName: containerClassName, elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isBlocking: isBlocking, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, isDarkOverlay: isDarkOverlay, isOpen: isOpen, onDismiss: onDismiss, onDismissed: onDismissed, onLayerDidMount: onLayerDidMount, responsiveMode: responsiveMode, subtitleAriaId: subText && id + '-subText', titleAriaId: title && id + '-title' },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-header', styles.header) },
React.createElement("p", { className: Utilities_1.css('ms-Dialog-title', styles.title), id: id + '-title', role: 'heading' }, title),
React.createElement("div", { className: Utilities_1.css('ms-Dialog-topButton', styles.topButton) },
this.props.topButtonsProps.map(function (props) { return (React.createElement(Button_1.IconButton, __assign({}, props))); }),
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button, (_c = {}, _c[styles.isClose] = isBlocking || type === Dialog_Props_1.DialogType.largeHeader, _c)), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
React.createElement("div", { className: Utilities_1.css('ms-Dialog-inner', styles.inner) },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-content', styles.content, this.props.contentClassName) },
subTextContent,
groupings.contents),
groupings.footers)));
var _b, _c;
};
// @TODO - typing the footers as an array of DialogFooter is difficult because
// casing "child as DialogFooter" causes a problem because
// "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
Dialog.prototype._groupChildren = function () {
var groupings = {
footers: [],
contents: []
};
React.Children.map(this.props.children, function (child) {
if (typeof child === 'object' && child !== null && child.type === DialogFooter_1.DialogFooter) {
groupings.footers.push(child);
}
else {
groupings.contents.push(child);
}
});
return groupings;
};
return Dialog;
}(Utilities_1.BaseComponent));
Dialog.defaultProps = {
isOpen: false,
type: Dialog_Props_1.DialogType.normal,
isDarkOverlay: true,
isBlocking: false,
className: '',
containerClassName: '',
contentClassName: '',
topButtonsProps: []
};
Dialog = __decorate([
withResponsiveMode_1.withResponsiveMode
], Dialog);
exports.Dialog = Dialog;
});
//# sourceMappingURL=Dialog.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { isOpen: 'isOpen_f5c589e9', main: 'main_f5c589e9', button: 'button_f5c589e9', isClose: 'isClose_f5c589e9', inner: 'inner_f5c589e9', header: 'header_f5c589e9', title: 'title_f5c589e9', topButton: 'topButton_f5c589e9', content: 'content_f5c589e9', subText: 'subText_f5c589e9', actions: 'actions_f5c589e9', actionsRight: 'actionsRight_f5c589e9', action: 'action_f5c589e9', isLargeHeader: 'isLargeHeader_f5c589e9', isMultiline: 'isMultiline_f5c589e9', }; load_themed_styles_1.loadStyles([{ "rawString": ".isOpen_f5c589e9{display:-webkit-box;display:-ms-flexbox;display:flex}.main_f5c589e9{width:288px}.button_f5c589e9.isClose_f5c589e9{display:none}.button_f5c589e9.isClose_f5c589e9 .ms-Icon.ms-Icon--Cancel{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:16px}.inner_f5c589e9{padding:0 28px 20px}.header_f5c589e9{position:relative;width:100%;box-sizing:border-box}.title_f5c589e9{margin:0;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:20px 36px 20px 28px}html[dir=rtl] .title_f5c589e9{padding:20px 28px 20px 36px}.topButton_f5c589e9{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;top:0;padding:12px 12px 0 0}html[dir=ltr] .topButton_f5c589e9{right:0}html[dir=rtl] .topButton_f5c589e9{left:0}html[dir=rtl] .topButton_f5c589e9{padding:12px 0 0 12px}.topButton_f5c589e9>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.content_f5c589e9{position:relative;width:100%}.content_f5c589e9 .ms-Button.ms-Button--compound{margin-bottom:20px}.content_f5c589e9 .ms-Button.ms-Button--compound:last-child{margin-bottom:0}.subText_f5c589e9{margin:0 0 20px 0;padding-top:8px;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:300;line-height:1.5}.actions_f5c589e9{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.actions_f5c589e9 .ms-Button{line-height:normal}.actionsRight_f5c589e9{font-size:0}html[dir=ltr] .actionsRight_f5c589e9{text-align:right}html[dir=rtl] .actionsRight_f5c589e9{text-align:left}html[dir=ltr] .actionsRight_f5c589e9{margin-right:-4px}html[dir=rtl] .actionsRight_f5c589e9{margin-left:-4px}.actionsRight_f5c589e9 .action_f5c589e9{margin:0 4px}.isClose_f5c589e9:not(.isLargeHeader_f5c589e9) .button_f5c589e9.isClose_f5c589e9{display:block}.isMultiline_f5c589e9 .title_f5c589e9{font-size:28px}.isMultiline_f5c589e9 .inner_f5c589e9{padding:0 20px 20px}.isLargeHeader_f5c589e9 .header_f5c589e9{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isLargeHeader_f5c589e9 .title_f5c589e9{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:28px;font-weight:100;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:26px 28px 28px;margin-bottom:8px}.isLargeHeader_f5c589e9 .subText_f5c589e9{font-size:14px}@media (min-width:480px){.main_f5c589e9{width:auto;min-width:288px;max-width:340px}}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Dialog.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./Dialog.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DialogFooter = (function (_super) {
__extends(DialogFooter, _super);
function DialogFooter() {
return _super !== null && _super.apply(this, arguments) || this;
}
DialogFooter.prototype.render = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-Dialog-actions', styles.actions) },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-actionsRight', styles.actionsRight) }, this._renderChildrenAsActions())));
};
DialogFooter.prototype._renderChildrenAsActions = function () {
return React.Children.map(this.props.children, function (child) {
return React.createElement("span", { className: Utilities_1.css('ms-Dialog-action', styles.action) }, child);
});
};
return DialogFooter;
}(Utilities_1.BaseComponent));
exports.DialogFooter = DialogFooter;
});
//# sourceMappingURL=DialogFooter.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Dialog.Basic.Example", "./examples/Dialog.LargeHeader.Example", "./examples/Dialog.Blocking.Example"], function (require, exports, React, example_app_base_1, Dialog_Basic_Example_1, Dialog_LargeHeader_Example_1, Dialog_Blocking_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DialogBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx');
var DialogLargeHeaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx');
var DialogBlockingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx');
var DialogPage = (function (_super) {
__extends(DialogPage, _super);
function DialogPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DialogPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Dialog', componentName: 'DialogExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog', code: DialogBasicExampleCode },
React.createElement(Dialog_Basic_Example_1.DialogBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog Large Header', code: DialogLargeHeaderExampleCode },
React.createElement("p", null, "Use this Dialog sparingly, when calling extra attention to the content. It can be used in situations where you want to teach the user something or notify them of an important change."),
React.createElement(Dialog_LargeHeader_Example_1.DialogLargeHeaderExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog Blocking', code: DialogBlockingExampleCode },
React.createElement("p", null, "A blocking Dialog disables all other actions and commands on the page behind it. They should be used very sparingly, only when it is critical that the user makes a choice or provides information before they can proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks."),
React.createElement(Dialog_Blocking_Example_1.DialogBlockingExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Dialog/Dialog.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information."),
React.createElement("li", null, "When possible, try a non-blocking Dialog before resorting to a blocking Dialog."),
React.createElement("li", null, "Only include information needed to help users make a decision."),
React.createElement("li", null, "Button text should reflect the actions available to the user (e.g. save, delete)."),
React.createElement("li", null, "Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience."),
React.createElement("li", null, "Avoid \"Are you sure?\" or confirmation Dialogs unless the user is making an irreversible or destructive choice."),
React.createElement("li", null, "Do not use a blocking Dialog unless absolutely necessary because they are very disruptive."),
React.createElement("li", null, "Don\u2019t have long sentences or complicated choices."),
React.createElement("li", null, "Avoid generic button labels like \"Ok\" if you can be more specific about the action a user is about to complete. "),
React.createElement("li", null, "Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state."),
React.createElement("li", null, "Don't provide the user with more than 3 buttons."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Dialog/Dialog.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return DialogPage;
}(React.Component));
exports.DialogPage = DialogPage;
});
//# sourceMappingURL=DialogPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 2 1 | define(["require", "exports", "./Dialog", "./DialogFooter", "./Dialog.Props"], function (require, exports, Dialog_1, DialogFooter_1, Dialog_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Dialog_1); __export(DialogFooter_1); __export(Dialog_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DocumentCard.Props.js | 16.67% | (1 / 6) | 0% | (0 / 2) | 0% | (0 / 2) | 16.67% | (1 / 6) | |
| DocumentCard.js | 12.96% | (7 / 54) | 10.61% | (7 / 66) | 7.69% | (1 / 13) | 14.58% | (7 / 48) | |
| DocumentCard.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DocumentCardActions.js | 23.33% | (7 / 30) | 29.17% | (7 / 24) | 9.09% | (1 / 11) | 26.92% | (7 / 26) | |
| DocumentCardActivity.js | 18.75% | (6 / 32) | 19.05% | (4 / 21) | 8.33% | (1 / 12) | 20.69% | (6 / 29) | |
| DocumentCardLocation.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| DocumentCardPage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| DocumentCardPreview.js | 12.73% | (7 / 55) | 13.46% | (7 / 52) | 7.69% | (1 / 13) | 14.58% | (7 / 48) | |
| DocumentCardTitle.js | 8.64% | (7 / 81) | 10.14% | (7 / 69) | 5.88% | (1 / 17) | 9.33% | (7 / 75) | |
| index.js | 15.38% | (2 / 13) | 0% | (0 / 2) | 0% | (0 / 2) | 18.18% | (2 / 11) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DocumentCardType; (function (DocumentCardType) { /** * Standard DocumentCard. */ DocumentCardType[DocumentCardType["normal"] = 0] = "normal"; /** * Compact layout. Displays the preview beside the details, rather than above. */ DocumentCardType[DocumentCardType["compact"] = 1] = "compact"; })(DocumentCardType = exports.DocumentCardType || (exports.DocumentCardType = {})); }); //# sourceMappingURL=DocumentCard.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "./DocumentCard.Props", "../../Utilities", "./DocumentCard.scss"], function (require, exports, React, DocumentCard_Props_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DocumentCard = (function (_super) {
__extends(DocumentCard, _super);
function DocumentCard() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCard.prototype.render = function () {
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, className = _a.className, type = _a.type, accentColor = _a.accentColor;
var actionable = (onClick || onClickHref) ? true : false;
// Override the border color if an accent color was provided (compact card only)
var style;
if (type === DocumentCard_Props_1.DocumentCardType.compact && accentColor) {
style = {
borderBottomColor: accentColor
};
}
// if this element is actionable it should have an aria role
var role = actionable ? (onClick ? 'button' : 'link') : null;
var tabIndex = actionable ? 0 : null;
return (React.createElement("div", { tabIndex: tabIndex, role: role, className: Utilities_1.css('ms-DocumentCard', styles.root, (_b = {},
_b['ms-DocumentCard--actionable ' + styles.rootIsActionable] = actionable,
_b['ms-DocumentCard--compact ' + styles.rootIsCompact] = type === DocumentCard_Props_1.DocumentCardType.compact ? true : false,
_b), className), onKeyDown: actionable ? this._onKeyDown : null, onClick: actionable ? this._onClick : null, style: style }, children));
var _b;
};
DocumentCard.prototype._onClick = function (ev) {
this._onAction(ev);
};
DocumentCard.prototype._onKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
this._onAction(ev);
}
};
DocumentCard.prototype._onAction = function (ev) {
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref;
if (onClick) {
onClick(ev);
}
else if (!onClick && onClickHref) {
// If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
window.location.href = onClickHref;
ev.preventDefault();
ev.stopPropagation();
}
};
return DocumentCard;
}(Utilities_1.BaseComponent));
DocumentCard.defaultProps = {
type: DocumentCard_Props_1.DocumentCardType.normal
};
__decorate([
Utilities_1.autobind
], DocumentCard.prototype, "_onClick", null);
__decorate([
Utilities_1.autobind
], DocumentCard.prototype, "_onKeyDown", null);
__decorate([
Utilities_1.autobind
], DocumentCard.prototype, "_onAction", null);
exports.DocumentCard = DocumentCard;
});
//# sourceMappingURL=DocumentCard.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_425a90a0', rootIsActionable: 'rootIsActionable_425a90a0', location: 'location_425a90a0', title: 'title_425a90a0', rootIsCompact: 'rootIsCompact_425a90a0', preview: 'preview_425a90a0', icon: 'icon_425a90a0', activity: 'activity_425a90a0', actions: 'actions_425a90a0', action: 'action_425a90a0', views: 'views_425a90a0', activityIsMultiplePeople: 'activityIsMultiplePeople_425a90a0', avatar: 'avatar_425a90a0', activityDetails: 'activityDetails_425a90a0', avatars: 'avatars_425a90a0', name: 'name_425a90a0', activityActivity: 'activityActivity_425a90a0', previewIsFileList: 'previewIsFileList_425a90a0', fileList: 'fileList_425a90a0', fileListIcon: 'fileListIcon_425a90a0', fileListMore: 'fileListMore_425a90a0', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_425a90a0{-webkit-font-smoothing:antialiased;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box;max-width:320px;min-width:206px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.rootIsActionable_425a90a0:hover{cursor:pointer;border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsActionable_425a90a0:hover:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";pointer-events:none}.location_425a90a0+.title_425a90a0{padding-top:4px}.rootIsCompact_425a90a0{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;max-width:480px;height:109px}.rootIsCompact_425a90a0 .ms-DocumentCard-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rootIsCompact_425a90a0 .preview_425a90a0{border-bottom:none;max-height:106px;max-width:144px}.rootIsCompact_425a90a0 .preview_425a90a0 .icon_425a90a0 .ms-Image-image{max-height:32px;max-width:32px}html[dir=ltr] .rootIsCompact_425a90a0 .preview_425a90a0{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .rootIsCompact_425a90a0 .preview_425a90a0{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.rootIsCompact_425a90a0 .title_425a90a0{padding:12px 16px 8px 16px;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;font-weight:400;line-height:16px}.rootIsCompact_425a90a0 .activity_425a90a0{padding-bottom:12px}.actions_425a90a0{height:34px;padding:4px 12px;position:relative}.action_425a90a0{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";cursor:pointer}html[dir=ltr] .action_425a90a0{float:left}html[dir=rtl] .action_425a90a0{float:right}html[dir=ltr] .action_425a90a0{margin-right:4px}html[dir=rtl] .action_425a90a0{margin-left:4px}.action_425a90a0 .ms-Button{font-size:16px;height:34px;width:34px}.action_425a90a0 .ms-Button:hover .ms-Button-icon{color:#1174c3;cursor:pointer}.views_425a90a0{line-height:34px}html[dir=ltr] .views_425a90a0{text-align:right}html[dir=rtl] .views_425a90a0{text-align:left}.views_425a90a0 .ms-Icon{font-size:16px;vertical-align:top}html[dir=ltr] .views_425a90a0 .ms-Icon{margin-right:4px}html[dir=rtl] .views_425a90a0 .ms-Icon{margin-left:4px}.activity_425a90a0{padding:8px 16px;position:relative}html[dir=ltr] .activityIsMultiplePeople_425a90a0 .avatar_425a90a0:nth-of-type(2){margin-left:-16px}html[dir=rtl] .activityIsMultiplePeople_425a90a0 .avatar_425a90a0:nth-of-type(2){margin-right:-16px}html[dir=ltr] .activityIsMultiplePeople_425a90a0 .activityDetails_425a90a0{left:72px}html[dir=rtl] .activityIsMultiplePeople_425a90a0 .activityDetails_425a90a0{right:72px}.avatars_425a90a0{height:32px}html[dir=ltr] .avatars_425a90a0{margin-left:-2px}html[dir=rtl] .avatars_425a90a0{margin-right:-2px}.avatar_425a90a0{display:inline-block;vertical-align:top;position:relative;text-align:center;width:32px;height:32px}.avatar_425a90a0:after{content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:2px solid #fafafa;border-radius:50%}.activityDetails_425a90a0{height:32px;position:absolute;top:8px;width:calc(100% - 72px)}html[dir=ltr] .activityDetails_425a90a0{left:56px}html[dir=rtl] .activityDetails_425a90a0{right:56px}.activityActivity_425a90a0,.name_425a90a0{display:block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name_425a90a0{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:600}.location_425a90a0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:block;padding:8px 16px;position:relative;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location_425a90a0:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";cursor:pointer}.preview_425a90a0{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";overflow:hidden}.preview_425a90a0.previewIsFileList_425a90a0{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.icon_425a90a0{bottom:10px;position:absolute}html[dir=ltr] .icon_425a90a0{left:10px}html[dir=rtl] .icon_425a90a0{right:10px}.fileList_425a90a0{padding:16px 16px 0 16px;list-style-type:none;margin:0}html[dir=rtl] .fileList_425a90a0{padding:16px 16px 0 16px}.fileList_425a90a0 li{height:16px;line-height:16px;margin-bottom:8px;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}html[dir=ltr] .fileList_425a90a0 li{padding-left:24px}html[dir=rtl] .fileList_425a90a0 li{padding-right:24px}.fileList_425a90a0 a{font-size:12px;text-decoration:none;color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.fileList_425a90a0 a:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.fileListIcon_425a90a0{position:absolute;top:0}html[dir=ltr] .fileListIcon_425a90a0{left:0}html[dir=rtl] .fileListIcon_425a90a0{right:0}.fileListMore_425a90a0{padding:0 16px 8px 16px;display:block;font-size:12px}html[dir=rtl] .fileListMore_425a90a0{padding:0 16px 8px 16px}.title_425a90a0{padding:8px 16px;display:block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:38px;line-height:21px;overflow:hidden;word-wrap:break-word}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=DocumentCard.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "../../Button", "./DocumentCard.scss"], function (require, exports, React, Utilities_1, Button_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DocumentCardActions = (function (_super) {
__extends(DocumentCardActions, _super);
function DocumentCardActions() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardActions.prototype.render = function () {
var _a = this.props, actions = _a.actions, views = _a.views;
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions', styles.actions) },
actions && actions.map(function (action, index) {
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-action', styles.action), key: index },
React.createElement(Button_1.IconButton, __assign({}, action))));
}),
views > 0 && (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-views', styles.views) },
React.createElement("i", { className: 'ms-Icon ms-Icon--View' }),
views))));
};
return DocumentCardActions;
}(Utilities_1.BaseComponent));
exports.DocumentCardActions = DocumentCardActions;
});
//# sourceMappingURL=DocumentCardActions.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "../../Persona", "./DocumentCard.scss"], function (require, exports, React, Utilities_1, Persona_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DocumentCardActivity = (function (_super) {
__extends(DocumentCardActivity, _super);
function DocumentCardActivity() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardActivity.prototype.render = function () {
var _a = this.props, activity = _a.activity, people = _a.people;
return (people && people.length > 0 &&
React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity', styles.activity, (_b = {},
_b['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople] = people.length > 1,
_b)) },
this._renderAvatars(people),
React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-details', styles.activityDetails) },
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-name', styles.name) }, this._getNameString(people)),
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-activity', styles.activityActivity) }, activity))));
var _b;
};
DocumentCardActivity.prototype._renderAvatars = function (people) {
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatars', styles.avatars) },
people.length > 1 ? this._renderAvatar(people[1]) : null,
this._renderAvatar(people[0])));
};
DocumentCardActivity.prototype._renderAvatar = function (person) {
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatar', styles.avatar) },
React.createElement(Persona_1.Persona, { imageInitials: person.initials, primaryText: person.name, hidePersonaDetails: true, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, role: 'persentation', size: Persona_1.PersonaSize.extraSmall })));
};
DocumentCardActivity.prototype._getNameString = function (people) {
var nameString = people[0].name;
if (people.length >= 2) {
nameString += ' +' + (people.length - 1);
}
return nameString;
};
return DocumentCardActivity;
}(Utilities_1.BaseComponent));
exports.DocumentCardActivity = DocumentCardActivity;
});
//# sourceMappingURL=DocumentCardActivity.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./DocumentCard.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DocumentCardLocation = (function (_super) {
__extends(DocumentCardLocation, _super);
function DocumentCardLocation() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardLocation.prototype.render = function () {
var _a = this.props, location = _a.location, locationHref = _a.locationHref, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
return (React.createElement("a", { className: Utilities_1.css('ms-DocumentCardLocation', styles.location), href: locationHref, onClick: onClick, "aria-label": ariaLabel }, location));
};
return DocumentCardLocation;
}(Utilities_1.BaseComponent));
exports.DocumentCardLocation = DocumentCardLocation;
});
//# sourceMappingURL=DocumentCardLocation.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/DocumentCard.Basic.Example", "./examples/DocumentCard.Complete.Example", "./examples/DocumentCard.Compact.Example"], function (require, exports, React, example_app_base_1, DocumentCard_Basic_Example_1, DocumentCard_Complete_Example_1, DocumentCard_Compact_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DocumentCardBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx');
var DocumentCardCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx');
var DocumentCardCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx');
var DocumentCardPage = (function (_super) {
__extends(DocumentCardPage, _super);
function DocumentCardPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DocumentCard', componentName: 'DocumentCardExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard Basic', code: DocumentCardBasicExampleCode },
React.createElement("p", null, "The default configuration for a card represents a single file, with space to denote the last significant event and the person involved."),
React.createElement(DocumentCard_Basic_Example_1.DocumentCardBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard Complete', code: DocumentCardCompleteExampleCode },
React.createElement("p", null, "This example shows a couple of optional abilities, including being able to have a card represent multiple items, being able to expose up to three relevant commands, and showing the number of views in the bottom right corner."),
React.createElement(DocumentCard_Complete_Example_1.DocumentCardCompleteExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard Compact Layout', code: DocumentCardCompactExampleCode },
React.createElement("p", null, "When showing a card on a mobile device or a similarly narrow layout, you may choose this Compact layout which helps the filename remain scannable while giving roomy space for a preview thumbnail."),
React.createElement(DocumentCard_Compact_Example_1.DocumentCardCompactExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/DocumentCard.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user\u2019s most trending document."),
React.createElement("li", null, "Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document\u2019s latest changes, or about the document\u2019s popularity, as you see fit."),
React.createElement("li", null, "Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata."),
React.createElement("li", null, "Don\u2019t use the DocumentCard if space is at a premium or you can\u2019t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like \u201CShare\u201D buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return DocumentCardPage;
}(React.Component));
exports.DocumentCardPage = DocumentCardPage;
});
//# sourceMappingURL=DocumentCardPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Image", "../../Utilities", "./DocumentCard.scss"], function (require, exports, React, Image_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LIST_ITEM_COUNT = 3;
var DocumentCardPreview = (function (_super) {
__extends(DocumentCardPreview, _super);
function DocumentCardPreview() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardPreview.prototype.render = function () {
var previewImages = this.props.previewImages;
var style, preview;
var isFileList = false;
if (previewImages.length > 1) {
// Render a list of files
preview = this._renderPreviewList(previewImages);
isFileList = true;
}
else if (previewImages.length === 1) {
// Render a single preview
preview = this._renderPreviewImage(previewImages[0]);
// Override the border color if an accent color was provided
if (previewImages[0].accentColor) {
style = {
borderBottomColor: previewImages[0].accentColor
};
}
}
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)), style: style }, preview));
};
DocumentCardPreview.prototype._renderPreviewImage = function (previewImage) {
var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit;
var image = (React.createElement(Image_1.Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: 'presentation', alt: '' }));
var icon;
if (previewImage.iconSrc) {
icon = React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-icon', styles.icon), src: previewImage.iconSrc, role: 'presentation', alt: '' });
}
return (React.createElement("div", null,
image,
icon));
};
DocumentCardPreview.prototype._renderPreviewList = function (previewImages) {
var getOverflowDocumentCountText = this.props.getOverflowDocumentCountText;
// Determine how many documents we won't be showing
var overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
// Determine the overflow text that will be rendered after the preview list.
var overflowText = overflowDocumentCount ?
(getOverflowDocumentCountText ?
getOverflowDocumentCountText(overflowDocumentCount) :
'+' + overflowDocumentCount) : null;
// Create list items for the documents to be shown
var fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex },
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon), src: file.iconSrc, role: 'presentation', alt: '', width: '16px', height: '16px' }),
React.createElement("a", { href: file.url }, file.name))); });
return (React.createElement("div", null,
React.createElement("ul", { className: Utilities_1.css('ms-DocumentCardPreview-fileList', styles.fileList) }, fileListItems),
overflowText &&
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }, overflowText)));
};
return DocumentCardPreview;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], DocumentCardPreview.prototype, "_renderPreviewList", null);
exports.DocumentCardPreview = DocumentCardPreview;
});
//# sourceMappingURL=DocumentCardPreview.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./DocumentCard.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TRUNCATION_SEPARATOR = '…';
var TRUNCATION_MINIMUM_LENGTH = 40; // This is the length we know can fit into the min width of DocumentCard.
var TRUNCATION_MAXIMUM_LENGTH = 90 - TRUNCATION_SEPARATOR.length;
var TRUNCATION_FIRST_PIECE_LONGER_BY = 10;
var TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;
var DocumentCardTitle = (function (_super) {
__extends(DocumentCardTitle, _super);
function DocumentCardTitle(props) {
var _this = _super.call(this, props) || this;
_this.state = {
truncatedTitleFirstPiece: '',
truncatedTitleSecondPiece: ''
};
return _this;
}
DocumentCardTitle.prototype.componentDidMount = function () {
var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate;
if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) {
if (this._doesTitleOverflow()) {
this._startTruncation(this.props);
}
this._events.on(window, 'resize', this._updateTruncation);
}
};
DocumentCardTitle.prototype.componentWillReceiveProps = function (newProps) {
this._events.off(window, 'resize');
this._isTruncated = false;
if (newProps.shouldTruncate && newProps.title && newProps.title.length > TRUNCATION_MINIMUM_LENGTH) {
this._startTruncation(newProps);
this._events.on(window, 'resize', this._updateTruncation);
}
};
DocumentCardTitle.prototype.componentDidUpdate = function () {
// If we're truncating, make sure the title fits
if (this.props.shouldTruncate) {
this._shrinkTitle();
}
};
DocumentCardTitle.prototype.render = function () {
var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate;
var _b = this.state, truncatedTitleFirstPiece = _b.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _b.truncatedTitleSecondPiece;
var documentCardTitle;
if (shouldTruncate && this._isTruncated) {
documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title },
truncatedTitleFirstPiece,
"\u2026",
truncatedTitleSecondPiece));
}
else {
documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title }, title));
}
return documentCardTitle;
};
DocumentCardTitle.prototype._startTruncation = function (props) {
var originalTitle = props.title;
this._isTruncated = false;
// If the title is really short, there's no need to truncate it
if (originalTitle && originalTitle.length >= TRUNCATION_MINIMUM_LENGTH) {
// Break the text into two pieces for assembly later
if (originalTitle.length > TRUNCATION_MAXIMUM_LENGTH) {
// The text is really long, so we can take a chunk out of the middle so the two pieces combine for the maximum length
this._isTruncated = true;
this.setState({
truncatedTitleFirstPiece: originalTitle.slice(0, TRUNCATION_MAXIMUM_LENGTH / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (TRUNCATION_MAXIMUM_LENGTH / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
});
}
else {
// The text is not so long, so we'll just break it into two pieces
this.setState({
truncatedTitleFirstPiece: originalTitle.slice(0, Math.ceil(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY),
truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - Math.floor(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY)
});
}
}
// Save the width we just started truncation at, so that later we will only update truncation if necessary
this._truncatedTitleAtWidth = this._titleElement.clientWidth;
};
DocumentCardTitle.prototype._shrinkTitle = function () {
if (this._doesTitleOverflow()) {
var _a = this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece;
this._isTruncated = true;
if (!truncatedTitleFirstPiece && !truncatedTitleSecondPiece) {
this._startTruncation(this.props);
}
this.setState({
truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),
truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1)
});
}
};
DocumentCardTitle.prototype._doesTitleOverflow = function () {
var titleElement = this._titleElement;
return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth;
};
DocumentCardTitle.prototype._updateTruncation = function () {
// Only update truncation if the title's size has changed since the last time we truncated
if (this._titleElement.clientWidth !== this._truncatedTitleAtWidth) {
// Throttle truncation so that it doesn't happen during a window resize
clearTimeout(this._scrollTimerId);
this._scrollTimerId = this._async.setTimeout(this._startTruncation.bind(this, this.props), 250);
}
};
return DocumentCardTitle;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], DocumentCardTitle.prototype, "_startTruncation", null);
exports.DocumentCardTitle = DocumentCardTitle;
});
//# sourceMappingURL=DocumentCardTitle.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 2 1 | define(["require", "exports", "./DocumentCard", "./DocumentCard.Props", "./DocumentCardActions", "./DocumentCardActivity", "./DocumentCardLocation", "./DocumentCardPreview", "./DocumentCardTitle"], function (require, exports, DocumentCard_1, DocumentCard_Props_1, DocumentCardActions_1, DocumentCardActivity_1, DocumentCardLocation_1, DocumentCardPreview_1, DocumentCardTitle_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(DocumentCard_1); __export(DocumentCard_Props_1); __export(DocumentCardActions_1); __export(DocumentCardActivity_1); __export(DocumentCardLocation_1); __export(DocumentCardPreview_1); __export(DocumentCardTitle_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Dropdown.Props.js | 14.29% | (1 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 14.29% | (1 / 7) | |
| Dropdown.js | 4.57% | (8 / 175) | 7.35% | (10 / 136) | 2.94% | (1 / 34) | 4.82% | (8 / 166) | |
| Dropdown.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| DropdownPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DropdownMenuItemType; (function (DropdownMenuItemType) { DropdownMenuItemType[DropdownMenuItemType["Normal"] = 0] = "Normal"; DropdownMenuItemType[DropdownMenuItemType["Divider"] = 1] = "Divider"; DropdownMenuItemType[DropdownMenuItemType["Header"] = 2] = "Header"; })(DropdownMenuItemType = exports.DropdownMenuItemType || (exports.DropdownMenuItemType = {})); }); //# sourceMappingURL=Dropdown.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "./Dropdown.Props", "../../common/DirectionalHint", "../../Callout", "../../Label", "../../Button", "../../Panel", "../../FocusZone", "../../utilities/decorators/withResponsiveMode", "../../Utilities", "./Dropdown.scss"], function (require, exports, React, Dropdown_Props_1, DirectionalHint_1, Callout_1, Label_1, Button_1, Panel_1, FocusZone_1, withResponsiveMode_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Dropdown = Dropdown_1 = (function (_super) {
__extends(Dropdown, _super);
function Dropdown(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
'isDisabled': 'disabled'
});
_this._warnMutuallyExclusive({
'defaultSelectedKey': 'selectedKey'
});
_this._id = props.id || Utilities_1.getId('Dropdown');
var selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
_this.state = {
isOpen: false,
selectedIndex: _this._getSelectedIndex(props.options, selectedKey)
};
return _this;
}
Dropdown.prototype.componentWillReceiveProps = function (newProps) {
// In controlled component usage where selectedKey is provided, update the selectedIndex
// state if the key or options change.
if (newProps.selectedKey !== undefined &&
(newProps.selectedKey !== this.props.selectedKey || newProps.options !== this.props.options)) {
this.setState({
selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
});
}
};
Dropdown.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevState.isOpen === true && this.state.isOpen === false) {
this._dropDown.focus();
}
};
// Primary Render
Dropdown.prototype.render = function () {
var id = this._id;
var _a = this.props, className = _a.className, label = _a.label, options = _a.options, disabled = _a.disabled, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel, required = _a.required, _b = _a.onRenderTitle, onRenderTitle = _b === void 0 ? this._onRenderTitle : _b, _c = _a.onRenderContainer, onRenderContainer = _c === void 0 ? this._onRenderContainer : _c;
var _d = this.state, isOpen = _d.isOpen, selectedIndex = _d.selectedIndex;
var selectedOption = options[selectedIndex];
// Remove this deprecation workaround at 1.0.0
if (isDisabled !== undefined) {
disabled = isDisabled;
}
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-Dropdown-container') },
label && (React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Dropdown-label'), id: id + '-label', ref: this._resolveRef('_dropdownLabel'), required: required }, label)),
React.createElement("div", { "data-is-focusable": !disabled, ref: this._resolveRef('_dropDown'), id: id, className: Utilities_1.css('ms-Dropdown', styles.root, className, (_e = {
'is-open': isOpen
},
_e['is-disabled ' + styles.rootIsDisabled] = disabled,
_e)), tabIndex: disabled ? -1 : 0, onKeyDown: this._onDropdownKeyDown, onKeyUp: this._onDropdownKeyUp, onClick: this._onDropdownClick, "aria-expanded": isOpen ? 'true' : 'false', role: 'combobox', "aria-live": disabled || isOpen ? 'off' : 'assertive', "aria-label": ariaLabel || label, "aria-describedby": id + '-option', "aria-activedescendant": isOpen && selectedIndex >= 0 ? (this._id + '-list' + selectedIndex) : null, "aria-disabled": disabled },
React.createElement("span", { id: id + '-option', className: Utilities_1.css('ms-Dropdown-title', styles.title), key: selectedIndex, "aria-atomic": true }, selectedOption && (onRenderTitle(selectedOption, this._onRenderTitle))),
React.createElement("i", { className: Utilities_1.css('ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown', styles.caretDown), role: 'presentation', "aria-hidden": 'true' })),
isOpen && (onRenderContainer(this.props, this._onRenderContainer))));
var _e;
};
Dropdown.prototype.focus = function () {
if (this._dropDown && this._dropDown.tabIndex !== -1) {
this._dropDown.focus();
}
};
Dropdown.prototype.setSelectedIndex = function (index) {
var _a = this.props, onChanged = _a.onChanged, options = _a.options;
var selectedIndex = this.state.selectedIndex;
index = Math.max(0, Math.min(options.length - 1, index));
if (index !== selectedIndex) {
// Set the selected option.
this.setState({
selectedIndex: index
});
if (onChanged) {
onChanged(options[index], index);
}
}
};
// Render text in dropdown input
Dropdown.prototype._onRenderTitle = function (item) {
return React.createElement("span", null, item.text);
};
// Render Callout or Panel container and pass in list
Dropdown.prototype._onRenderContainer = function (props) {
var _a = this.props, _b = _a.onRenderList, onRenderList = _b === void 0 ? this._onRenderList : _b, responsiveMode = _a.responsiveMode;
var isSmall = responsiveMode <= withResponsiveMode_1.ResponsiveMode.medium;
return (isSmall ?
React.createElement(Panel_1.Panel, { className: Utilities_1.css('ms-Dropdown-panel', styles.panel), isOpen: true, isLightDismiss: true, onDismissed: this._onDismiss, hasCloseButton: false }, onRenderList(props, this._onRenderList))
:
React.createElement(Callout_1.Callout, { isBeakVisible: false, className: Utilities_1.css('ms-Dropdown-callout', styles.callout), gapSpace: 0, doNotLayer: false, targetElement: this._dropDown, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onDismiss, onPositioned: this._onPositioned },
React.createElement("div", { style: { width: this._dropDown.clientWidth - 2 } }, onRenderList(props, this._onRenderList))));
};
// Render List of items
Dropdown.prototype._onRenderList = function (props) {
var _this = this;
var _a = this.props.onRenderItem, onRenderItem = _a === void 0 ? this._onRenderItem : _a;
var id = this._id;
var selectedIndex = this.state.selectedIndex;
return (React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('_focusZone'), direction: FocusZone_1.FocusZoneDirection.vertical, defaultActiveElement: '#' + id + '-list' + selectedIndex, id: id + '-list', className: Utilities_1.css('ms-Dropdown-items', styles.items), "aria-labelledby": id + '-label', onKeyDown: this._onZoneKeyDown }, this.props.options.map(function (item, index) { return onRenderItem(__assign({}, item, { index: index }), _this._onRenderItem); })));
};
// Render items
Dropdown.prototype._onRenderItem = function (item) {
switch (item.itemType) {
case Dropdown_Props_1.DropdownMenuItemType.Divider:
return this._renderSeparator(item);
case Dropdown_Props_1.DropdownMenuItemType.Header:
return this._renderHeader(item);
default:
return this._renderOption(item);
}
};
// Render separator
Dropdown.prototype._renderSeparator = function (item) {
var index = item.index, key = item.key;
if (index > 0) {
return React.createElement("div", { role: 'separator', key: key, className: Utilities_1.css('ms-Dropdown-divider', styles.divider) });
}
return null;
};
Dropdown.prototype._renderHeader = function (item) {
var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;
return (React.createElement("div", { className: Utilities_1.css('ms-Dropdown-header', styles.header) }, onRenderOption(item, this._onRenderOption)));
};
// Render menu item
Dropdown.prototype._renderOption = function (item) {
var _this = this;
var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;
var id = this._id;
return (React.createElement(Button_1.CommandButton, { id: id + '-list' + item.index, ref: Dropdown_1.Option + item.index, key: item.key, "data-index": item.index, "data-is-focusable": true, className: Utilities_1.css('ms-Dropdown-item', styles.item, (_b = {},
_b['is-selected ' + styles.itemIsSelected] = this.state.selectedIndex === item.index,
_b['is-disabled ' + styles.itemIsDisabled] = this.props.disabled === true,
_b)), onClick: function () { return _this._onItemClick(item.index); }, role: 'menu', "aria-selected": this.state.selectedIndex === item.index ? 'true' : 'false', "aria-label": item.text },
" ",
onRenderOption(item, this._onRenderOption)));
var _b;
};
// Render content of item (i.e. text/icon inside of button)
Dropdown.prototype._onRenderOption = function (item) {
return React.createElement("span", null, item.text);
};
Dropdown.prototype._onPositioned = function () {
this._focusZone.focus();
};
Dropdown.prototype._onItemClick = function (index) {
this.setSelectedIndex(index);
this.setState({
isOpen: false
});
};
Dropdown.prototype._onDismiss = function () {
this.setState({ isOpen: false });
this._dropDown.focus();
};
Dropdown.prototype._getSelectedIndex = function (options, selectedKey) {
return Utilities_1.findIndex(options, (function (option) { return (option.isSelected || option.selected || (selectedKey != null) && option.key === selectedKey); }));
};
Dropdown.prototype._onDropdownKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
this.setState({
isOpen: !this.state.isOpen
});
break;
case Utilities_1.KeyCodes.escape:
if (!this.state.isOpen) {
return;
}
this.setState({
isOpen: false
});
break;
case Utilities_1.KeyCodes.up:
this.setSelectedIndex(this.state.selectedIndex - 1);
break;
case Utilities_1.KeyCodes.down:
if (ev.altKey || ev.metaKey) {
this.setState({ isOpen: true });
}
else {
this.setSelectedIndex(this.state.selectedIndex + 1);
}
break;
case Utilities_1.KeyCodes.home:
this.setSelectedIndex(0);
break;
case Utilities_1.KeyCodes.end:
this.setSelectedIndex(this.props.options.length - 1);
break;
case Utilities_1.KeyCodes.space:
// event handled in _onDropdownKeyUp
break;
default:
return;
}
ev.stopPropagation();
ev.preventDefault();
};
Dropdown.prototype._onDropdownKeyUp = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.space:
this.setState({
isOpen: !this.state.isOpen
});
break;
default:
return;
}
ev.stopPropagation();
ev.preventDefault();
};
Dropdown.prototype._onZoneKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.up:
if (ev.altKey || ev.metaKey) {
this.setState({ isOpen: false });
break;
}
return;
case Utilities_1.KeyCodes.escape:
this.setState({ isOpen: false });
break;
default:
return;
}
ev.stopPropagation();
ev.preventDefault();
};
Dropdown.prototype._onDropdownClick = function () {
var _a = this.props, disabled = _a.disabled, isDisabled = _a.isDisabled;
var isOpen = this.state.isOpen;
// Remove this deprecation workaround at 1.0.0
if (isDisabled !== undefined) {
disabled = isDisabled;
}
if (!disabled) {
this.setState({
isOpen: !isOpen
});
}
};
return Dropdown;
}(Utilities_1.BaseComponent));
Dropdown.defaultProps = {
options: []
};
Dropdown.Option = 'option';
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderTitle", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderContainer", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderList", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderItem", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_renderOption", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderOption", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onPositioned", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDismiss", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDropdownKeyDown", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDropdownKeyUp", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onZoneKeyDown", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDropdownClick", null);
Dropdown = Dropdown_1 = __decorate([
withResponsiveMode_1.withResponsiveMode
], Dropdown);
exports.Dropdown = Dropdown;
var Dropdown_1;
});
//# sourceMappingURL=Dropdown.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_4486e2b3', title: 'title_4486e2b3', caretDown: 'caretDown_4486e2b3', rootIsDisabled: 'rootIsDisabled_4486e2b3', panel: 'panel_4486e2b3', callout: 'callout_4486e2b3', items: 'items_4486e2b3', item: 'item_4486e2b3', itemIsDisabled: 'itemIsDisabled_4486e2b3', itemIsSelected: 'itemIsSelected_4486e2b3', header: 'header_4486e2b3', divider: 'divider_4486e2b3', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_4486e2b3{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-bottom:10px;position:relative;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_4486e2b3:active .caretDown_4486e2b3,.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:focus .caretDown_4486e2b3,.root_4486e2b3:focus .title_4486e2b3,.root_4486e2b3:hover .caretDown_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3:active .caretDown_4486e2b3,.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:focus .caretDown_4486e2b3,.root_4486e2b3:focus .title_4486e2b3,.root_4486e2b3:hover .caretDown_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3:active .caretDown_4486e2b3,.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:focus .caretDown_4486e2b3,.root_4486e2b3:focus .title_4486e2b3,.root_4486e2b3:hover .caretDown_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{color:#37006e}}.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{border-color:#37006e}}.root_4486e2b3:focus .title_4486e2b3{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3:focus .title_4486e2b3{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3:focus .title_4486e2b3{border-color:#37006e}}.root_4486e2b3 .ms-Label{display:inline-block;margin-bottom:8px}.root_4486e2b3.rootIsDisabled_4486e2b3 .title_4486e2b3{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}@media screen and (-ms-high-contrast:active){.root_4486e2b3.rootIsDisabled_4486e2b3 .title_4486e2b3{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3.rootIsDisabled_4486e2b3 .title_4486e2b3{border-color:#600000;color:#600000}}.root_4486e2b3.rootIsDisabled_4486e2b3 .caretDown_4486e2b3{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3.rootIsDisabled_4486e2b3 .caretDown_4486e2b3{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3.rootIsDisabled_4486e2b3 .caretDown_4486e2b3{color:#600000}}.caretDown_4486e2b3{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";font-size:12px;position:absolute;top:0;pointer-events:none;line-height:32px}html[dir=ltr] .caretDown_4486e2b3{right:12px}html[dir=rtl] .caretDown_4486e2b3{left:12px}.title_4486e2b3{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 12px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}html[dir=rtl] .title_4486e2b3{padding:0 12px 0 32px}.panel_4486e2b3 .ms-Panel-main{box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.panel_4486e2b3 .ms-Panel-contentInner{padding:0 0 20px}.callout_4486e2b3{box-shadow:0 0 15px -5px rgba(0,0,0,.4);border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.items_4486e2b3{display:block}.item_4486e2b3{background:0 0;box-sizing:border-box;cursor:pointer;display:block;width:100%;height:auto;min-height:36px;line-height:20px;padding:5px 16px;position:relative;border:1px solid transparent;word-wrap:break-word;text-align:left}@media screen and (-ms-high-contrast:active){.item_4486e2b3{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_4486e2b3{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.item_4486e2b3:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.item_4486e2b3:hover{background-color:#1aebff;border-color:#1aebff;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3:hover:focus{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_4486e2b3:hover{background-color:#37006e;border-color:#37006e;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.item_4486e2b3::-moz-focus-inner{border:0}.item_4486e2b3{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .item_4486e2b3:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.item_4486e2b3:focus{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_4486e2b3:active{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3.itemIsDisabled_4486e2b3{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}.item_4486e2b3 .ms-Button-flexContainer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.item_4486e2b3.itemIsSelected_4486e2b3{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3.itemIsSelected_4486e2b3:hover{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.item_4486e2b3.itemIsSelected_4486e2b3::-moz-focus-inner{border:0}.item_4486e2b3.itemIsSelected_4486e2b3{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .item_4486e2b3.itemIsSelected_4486e2b3:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.item_4486e2b3.itemIsSelected_4486e2b3{background-color:#1aebff;border-color:#1aebff;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3.itemIsSelected_4486e2b3:focus{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_4486e2b3.itemIsSelected_4486e2b3{background-color:#37006e;border-color:#37006e;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.header_4486e2b3{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html[dir=ltr] .header_4486e2b3{text-align:left}html[dir=rtl] .header_4486e2b3{text-align:right}.divider_4486e2b3{height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Dropdown.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Dropdown.Basic.Example"], function (require, exports, React, example_app_base_1, Dropdown_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DropdownBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx');
var DropdownPage = (function (_super) {
__extends(DropdownPage, _super);
function DropdownPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DropdownPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Dropdown', componentName: 'DropdownExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Dropdown', code: DropdownBasicExampleCode },
React.createElement(Dropdown_Basic_Example_1.DropdownBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained."),
React.createElement("li", null, "Dropdowns contain shortened statements or words."),
React.createElement("li", null, "Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options)."))), donts: React.createElement("div", null), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Dropdown/Dropdown.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return DropdownPage;
}(React.Component));
exports.DropdownPage = DropdownPage;
});
//# sourceMappingURL=DropdownPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Dropdown", "./Dropdown.Props"], function (require, exports, Dropdown_1, Dropdown_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Dropdown_1); __export(Dropdown_Props_1); }); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DIRECTIONAL_KEY_CODES = [
Utilities_1.KeyCodes.up,
Utilities_1.KeyCodes.down,
Utilities_1.KeyCodes.left,
Utilities_1.KeyCodes.right,
Utilities_1.KeyCodes.home,
Utilities_1.KeyCodes.end,
Utilities_1.KeyCodes.tab,
Utilities_1.KeyCodes.pageUp,
Utilities_1.KeyCodes.pageDown
];
// We will track the last focus visibility state so that if we tear down and recreate
// the Fabric component, we will use the last known value as the default.
var _lastIsFocusVisible = false;
// Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work.
if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) {
document.documentElement.setAttribute('dir', 'ltr');
}
var Fabric = (function (_super) {
__extends(Fabric, _super);
function Fabric() {
var _this = _super.call(this) || this;
_this.state = {
isFocusVisible: _lastIsFocusVisible
};
return _this;
}
Fabric.prototype.componentDidMount = function () {
this._events.on(document.body, 'mousedown', this._onMouseDown, true);
this._events.on(document.body, 'keydown', this._onKeyDown, true);
};
Fabric.prototype.render = function () {
var isFocusVisible = this.state.isFocusVisible;
var rootClass = Utilities_1.css('ms-Fabric ms-font-m', this.props.className, {
'is-focusVisible': isFocusVisible
});
return (React.createElement("div", __assign({}, this.props, { className: rootClass, ref: 'root' })));
};
Fabric.prototype._onMouseDown = function () {
if (this.state.isFocusVisible) {
this.setState({
isFocusVisible: false
});
_lastIsFocusVisible = false;
}
};
Fabric.prototype._onKeyDown = function (ev) {
if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
this.setState({
isFocusVisible: true
});
_lastIsFocusVisible = true;
}
};
return Fabric;
}(Utilities_1.BaseComponent));
exports.Fabric = Fabric;
});
//# sourceMappingURL=Fabric.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Fabric"], function (require, exports, Fabric_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Fabric_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Facepile.Props.js | 12.5% | (1 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 12.5% | (1 / 8) | |
| Facepile.js | 8.54% | (7 / 82) | 14.29% | (7 / 49) | 3.85% | (1 / 26) | 9.09% | (7 / 77) | |
| Facepile.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| FacepilePage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var OverflowButtonType; (function (OverflowButtonType) { /** No overflow */ OverflowButtonType[OverflowButtonType["none"] = 0] = "none"; /** +1 overflow icon */ OverflowButtonType[OverflowButtonType["descriptive"] = 1] = "descriptive"; /** More overflow icon */ OverflowButtonType[OverflowButtonType["more"] = 2] = "more"; /** Chevron overflow icon */ OverflowButtonType[OverflowButtonType["downArrow"] = 3] = "downArrow"; })(OverflowButtonType = exports.OverflowButtonType || (exports.OverflowButtonType = {})); }); //# sourceMappingURL=Facepile.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./Facepile.Props", "../../FocusZone", "../../Button", "../../Persona", "./Facepile.scss"], function (require, exports, React, Utilities_1, Facepile_Props_1, FocusZone_1, Button_1, Persona_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Facepile = (function (_super) {
__extends(Facepile, _super);
function Facepile(props) {
var _this = _super.call(this, props) || this;
_this._ariaDescriptionId = Utilities_1.getId();
return _this;
}
Facepile.prototype.render = function () {
var _this = this;
var _a = this.props, chevronButtonProps = _a.chevronButtonProps, maxDisplayablePersonas = _a.maxDisplayablePersonas, overflowButtonProps = _a.overflowButtonProps, overflowButtonType = _a.overflowButtonType, ariaDescription = _a.ariaDescription, personas = _a.personas, showAddButton = _a.showAddButton;
var numPersonasToShow = Math.min(personas.length, maxDisplayablePersonas);
// Added for deprecating chevronButtonProps. Can remove after v1.0
if (chevronButtonProps && !overflowButtonProps) {
overflowButtonProps = chevronButtonProps;
overflowButtonType = Facepile_Props_1.OverflowButtonType.downArrow;
}
return (React.createElement("div", { className: Utilities_1.css('ms-Facepile', styles.root) },
React.createElement("div", { className: Utilities_1.css('ms-Facepile-itemContainer', styles.itemContainer) },
showAddButton ? this._getAddNewElement() : null,
this.onRenderAriaDescription(),
React.createElement(FocusZone_1.FocusZone, { ariaDescribedBy: this._ariaDescriptionId, role: 'listbox', className: Utilities_1.css('ms-Facepile-members', styles.members), direction: FocusZone_1.FocusZoneDirection.horizontal }, personas.slice(0, numPersonasToShow).map(function (persona, index) {
var personaControl = _this._getPersonaControl(persona);
return persona.onClick ?
_this._getElementWithOnClickEvent(personaControl, persona, index) :
_this._getElementWithoutOnClickEvent(personaControl, persona, index);
})),
overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null)));
};
Facepile.prototype.onRenderAriaDescription = function () {
var ariaDescription = this.props.ariaDescription;
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
// otherwise it will be assigned to descriptionSpan.
return ariaDescription && (React.createElement("span", { className: styles.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription));
};
Facepile.prototype._getPersonaControl = function (persona) {
var _a = this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
return React.createElement(Persona_1.Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, primaryText: persona.personaName, size: personaSize, hidePersonaDetails: true }, (getPersonaProps ? getPersonaProps(persona) : null)));
};
Facepile.prototype._getElementWithOnClickEvent = function (personaControl, persona, index) {
return React.createElement(Button_1.BaseButton, __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.buttonProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onClick: this._onPersonaClick.bind(this, persona), onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl);
};
Facepile.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, index) {
return React.createElement("div", __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.divProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl);
};
Facepile.prototype._getOverflowElement = function (numPersonasToShow) {
switch (this.props.overflowButtonType) {
case Facepile_Props_1.OverflowButtonType.descriptive:
return this._getDescriptiveOverflowElement(numPersonasToShow);
case Facepile_Props_1.OverflowButtonType.downArrow:
return this._getIconElement('ChevronDown');
case Facepile_Props_1.OverflowButtonType.more:
return this._getIconElement('More');
default:
return null;
}
};
Facepile.prototype._getDescriptiveOverflowElement = function (numPersonasToShow) {
var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personas = _a.personas, personaSize = _a.personaSize;
var numPersonasNotPictured = personas.length - numPersonasToShow;
if (!overflowButtonProps || numPersonasNotPictured < 1) {
return null;
}
var personaNames = personas.slice(numPersonasToShow).map(function (p) { return p.personaName; }).join(', ');
return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { ariaDescription: personaNames, className: Utilities_1.css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }),
React.createElement(Persona_1.Persona, { title: personaNames, size: personaSize, hidePersonaDetails: true, onRenderInitials: function () {
return (React.createElement("span", null, '+' + numPersonasNotPictured));
} }));
};
Facepile.prototype._getIconElement = function (icon) {
var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;
return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { className: Utilities_1.css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }),
React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement("i", { className: Utilities_1.css('ms-Icon', 'msIcon', "ms-Icon ms-Icon--" + icon), "aria-hidden": 'true' })); } }));
};
Facepile.prototype._getAddNewElement = function () {
var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;
return React.createElement(Button_1.BaseButton, __assign({}, addButtonProps, { className: Utilities_1.css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }),
React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement("i", { className: 'ms-Icon msIcon ms-Icon--AddFriend', "aria-hidden": 'true' })); } }));
};
Facepile.prototype._onPersonaClick = function (persona, ev) {
persona.onClick(ev, persona);
ev.preventDefault();
ev.stopPropagation();
};
Facepile.prototype._onPersonaMouseMove = function (persona, ev) {
if (!!persona.onMouseMove) {
persona.onMouseMove(ev, persona);
}
};
Facepile.prototype._onPersonaMouseOut = function (persona, ev) {
if (!!persona.onMouseOut) {
persona.onMouseOut(ev, persona);
}
};
return Facepile;
}(Utilities_1.BaseComponent));
Facepile.defaultProps = {
maxDisplayablePersonas: 5,
personas: [],
personaSize: Persona_1.PersonaSize.extraSmall
};
exports.Facepile = Facepile;
});
//# sourceMappingURL=Facepile.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_e97197f5', clear: 'clear_e97197f5', itemContainer: 'itemContainer_e97197f5', members: 'members_e97197f5', itemButton: 'itemButton_e97197f5', addButton: 'addButton_e97197f5', overflowButton: 'overflowButton_e97197f5', descriptiveOverflowButton: 'descriptiveOverflowButton_e97197f5', screenReaderOnly: 'screenReaderOnly_e97197f5', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_e97197f5{width:auto}.clear_e97197f5{clear:both}.itemContainer_e97197f5{display:-webkit-box;display:-ms-flexbox;display:flex}.members_e97197f5{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;margin:-2px}.members_e97197f5>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px}.itemButton_e97197f5{text-align:center;padding:0;border-radius:50%;vertical-align:top}.ms-Fabric.is-focusVisible .itemButton_e97197f5:focus{outline:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemButton_e97197f5 .ms-Persona-details{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}button.itemButton_e97197f5{display:inline;background:0 0;padding:0;cursor:pointer;border:none}button.itemButton_e97197f5::-moz-focus-inner{padding:0;border:0}button.addButton_e97197f5{font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] button.addButton_e97197f5{margin-right:4px}html[dir=rtl] button.addButton_e97197f5{margin-left:4px}button.addButton_e97197f5:focus,button.addButton_e97197f5:hover{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}button.addButton_e97197f5:active{background-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}button.addButton_e97197f5:disabled{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}button.overflowButton_e97197f5{font-size:14px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.overflowButton_e97197f5{margin-left:4px}html[dir=rtl] button.overflowButton_e97197f5{margin-right:4px}button.descriptiveOverflowButton_e97197f5{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.descriptiveOverflowButton_e97197f5{margin-left:4px}html[dir=rtl] button.descriptiveOverflowButton_e97197f5{margin-right:4px}.screenReaderOnly_e97197f5{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Facepile.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Facepile.AddFace.Example", "./examples/Facepile.Basic.Example", "./examples/Facepile.Overflow.Example"], function (require, exports, React, example_app_base_1, Facepile_AddFace_Example_1, Facepile_Basic_Example_1, Facepile_Overflow_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FacepileAddFaceExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx');
var FacepileBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx');
var FacepileOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx');
var FacepilePage = (function (_super) {
__extends(FacepilePage, _super);
function FacepilePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
FacepilePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Facepile', componentName: 'FacepileExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Facepile with Extras', code: FacepileBasicExampleCode },
React.createElement(Facepile_Basic_Example_1.FacepileBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Facepile with Overflow', code: FacepileOverflowExampleCode },
React.createElement(Facepile_Overflow_Example_1.FacepileOverflowExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Facepile with Add Face', code: FacepileAddFaceExampleCode },
React.createElement(Facepile_AddFace_Example_1.FacepileAddFaceExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow."),
React.createElement("h2", { className: 'ms-font-xl' }, "Adding people"),
React.createElement("p", null, "The component can include an add button which can be used for quickly adding a person to the list."),
React.createElement("h2", { className: 'ms-font-xl' }, "Empty state"),
React.createElement("p", null, "The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list."),
React.createElement("h2", { className: 'ms-font-xl' }, "One person"),
React.createElement("p", null, "When there is only one person in the Facepile, consider using their name next to the face or initials."),
React.createElement("h2", { className: 'ms-font-xl' }, "Expanding the list when there is no overflow"),
React.createElement("p", null, "When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas."),
React.createElement("h2", { className: 'ms-font-xl' }, "Overflow"),
React.createElement("p", null, "When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use if looking for a way to represent who has access to an area and need to show that as a people representation."),
React.createElement("li", null, "Only show the Add button if a user has access to do so."),
React.createElement("li", null, "Allow a way for the user to understand who the person is. Many common ways to do this are with a tooltip or adding the ability to open up a PeopleCard Experience."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use for things other than people."),
React.createElement("li", null, "Overwhelm users by listing every single person as a circle but truncate and provide a way to see the full list."),
React.createElement("li", null, "Don\u2019t use this control for experiences where you need to manage details of hundreds of users, you are better off using a list control."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/FacePile/FacePile.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return FacepilePage;
}(React.Component));
exports.FacepilePage = FacepilePage;
});
//# sourceMappingURL=FacepilePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Facepile.Props", "./Facepile"], function (require, exports, Facepile_Props_1, Facepile_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Facepile_Props_1); __export(Facepile_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| FocusTrapZone.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| FocusTrapZone.js | 7.21% | (8 / 111) | 9.8% | (10 / 102) | 5.26% | (1 / 19) | 7.69% | (8 / 104) | |
| FocusTrapZonePage.js | 24% | (6 / 25) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 27.27% | (6 / 22) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=FocusTrapZone.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FocusTrapZone = (function (_super) {
__extends(FocusTrapZone, _super);
function FocusTrapZone() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._isInFocusStack = false;
_this._isInClickStack = false;
return _this;
}
FocusTrapZone.prototype.componentWillMount = function () {
var _a = this.props, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c;
if (forceFocusInsideTrap) {
this._isInFocusStack = true;
FocusTrapZone._focusStack.push(this);
}
if (!isClickableOutsideFocusTrap) {
this._isInClickStack = true;
FocusTrapZone._clickStack.push(this);
}
};
FocusTrapZone.prototype.componentDidMount = function () {
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c;
this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement;
if (!Utilities_1.elementContains(this.refs.root, this._previouslyFocusedElement)) {
this.focus();
}
if (forceFocusInsideTrap) {
this._events.on(window, 'focus', this._forceFocusInTrap, true);
}
if (!isClickableOutsideFocusTrap) {
this._events.on(window, 'click', this._forceClickInTrap, true);
}
};
FocusTrapZone.prototype.componentWillUnmount = function () {
var _this = this;
var ignoreExternalFocusing = this.props.ignoreExternalFocusing;
this._events.dispose();
if (this._isInFocusStack || this._isInClickStack) {
var filter = function (value) {
return _this !== value;
};
if (this._isInFocusStack) {
FocusTrapZone._focusStack = FocusTrapZone._focusStack.filter(filter);
}
if (this._isInClickStack) {
FocusTrapZone._clickStack = FocusTrapZone._clickStack.filter(filter);
}
}
if (!ignoreExternalFocusing && this._previouslyFocusedElement) {
this._previouslyFocusedElement.focus();
}
};
FocusTrapZone.prototype.render = function () {
var _a = this.props, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
return (React.createElement("div", __assign({}, divProps, { className: className, ref: 'root', "aria-labelledby": ariaLabelledBy, onKeyDown: this._onKeyboardHandler }), this.props.children));
};
/**
* Need to expose this method in case of popups since focus needs to be set when popup is opened
*/
FocusTrapZone.prototype.focus = function () {
var firstFocusableSelector = this.props.firstFocusableSelector;
var _firstFocusableChild;
var root = this.refs.root;
if (firstFocusableSelector) {
_firstFocusableChild = root.querySelector('.' + firstFocusableSelector);
}
else {
_firstFocusableChild = Utilities_1.getNextElement(root, root.firstChild, true, false, false, true);
}
if (_firstFocusableChild) {
_firstFocusableChild.focus();
}
};
FocusTrapZone.prototype._onKeyboardHandler = function (ev) {
if (ev.which !== Utilities_1.KeyCodes.tab) {
return;
}
var root = this.refs.root;
var _firstFocusableChild = Utilities_1.getFirstFocusable(root, root.firstChild, true);
var _lastFocusableChild = Utilities_1.getLastFocusable(root, root.lastChild, true);
if (ev.shiftKey && _firstFocusableChild === ev.target) {
_lastFocusableChild.focus();
ev.preventDefault();
ev.stopPropagation();
}
else if (!ev.shiftKey && _lastFocusableChild === ev.target) {
_firstFocusableChild.focus();
ev.preventDefault();
ev.stopPropagation();
}
};
FocusTrapZone.prototype._forceFocusInTrap = function (ev) {
if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
var focusedElement = document.activeElement;
if (!Utilities_1.elementContains(this.refs.root, focusedElement)) {
this.focus();
ev.preventDefault();
ev.stopPropagation();
}
}
};
FocusTrapZone.prototype._forceClickInTrap = function (ev) {
if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) {
var clickedElement = ev.target;
if (clickedElement && !Utilities_1.elementContains(this.refs.root, clickedElement)) {
this.focus();
ev.preventDefault();
ev.stopPropagation();
}
}
};
return FocusTrapZone;
}(Utilities_1.BaseComponent));
FocusTrapZone._focusStack = [];
FocusTrapZone._clickStack = [];
__decorate([
Utilities_1.autobind
], FocusTrapZone.prototype, "_onKeyboardHandler", null);
exports.FocusTrapZone = FocusTrapZone;
});
//# sourceMappingURL=FocusTrapZone.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "office-ui-fabric-react/lib/Link", "@uifabric/example-app-base", "./examples/FocusTrapZone.Box.Example", "./examples/FocusTrapZone.Box.FocusOnCustomElement.Example", "./examples/FocusTrapZone.Box.Click.Example", "./examples/FocusTrapZone.Nested.Example"], function (require, exports, React, Link_1, example_app_base_1, FocusTrapZone_Box_Example_1, FocusTrapZone_Box_FocusOnCustomElement_Example_1, FocusTrapZone_Box_Click_Example_1, FocusTrapZone_Nested_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FocusTrapZoneBoxExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx');
var FocusTrapZoneBoxExampleWithFocusableItemCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx');
var FocusTrapZoneBoxClickExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx');
var FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx');
var FocusTrapZonePage = (function (_super) {
__extends(FocusTrapZonePage, _super);
function FocusTrapZonePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
FocusTrapZonePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'FocusTrapZone', componentName: 'FocusTrapZoneExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Box', code: FocusTrapZoneBoxExampleCode },
React.createElement(FocusTrapZone_Box_Example_1.default, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Box with focus on custom focusable element', code: FocusTrapZoneBoxExampleWithFocusableItemCode },
React.createElement(FocusTrapZone_Box_FocusOnCustomElement_Example_1.default, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Box with Clicking outside Trap Zone enabled', code: FocusTrapZoneBoxClickExampleCode },
React.createElement(FocusTrapZone_Box_Click_Example_1.default, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Multiple Nest FocusTrapZones', code: FocusTrapZoneNestedExampleCode },
React.createElement(FocusTrapZone_Nested_Example_1.default, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/utilities/FocusTrapZone' }, "FocusTrapZone"),
React.createElement("span", null, " is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return FocusTrapZonePage;
}(React.Component));
exports.FocusTrapZonePage = FocusTrapZonePage;
});
//# sourceMappingURL=FocusTrapZonePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./FocusTrapZone"], function (require, exports, FocusTrapZone_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(FocusTrapZone_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| FocusZone.Props.js | 14.29% | (1 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 14.29% | (1 / 7) | |
| FocusZone.js | 2.42% | (8 / 331) | 3.46% | (10 / 289) | 2.86% | (1 / 35) | 2.47% | (8 / 324) | |
| FocusZonePage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var FocusZoneDirection; (function (FocusZoneDirection) { /** Only react to up/down arrows. */ FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical"; /** Only react to left/right arrows. */ FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal"; /** React to all arrows. */ FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional"; })(FocusZoneDirection = exports.FocusZoneDirection || (exports.FocusZoneDirection = {})); }); //# sourceMappingURL=FocusZone.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "./FocusZone.Props", "../../Utilities"], function (require, exports, React, FocusZone_Props_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
var IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';
var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';
var TABINDEX = 'tabindex';
var _allInstances = {};
var ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search'];
var FocusZone = (function (_super) {
__extends(FocusZone, _super);
function FocusZone(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ rootProps: null });
_this._id = Utilities_1.getId('FocusZone');
_allInstances[_this._id] = _this;
_this._focusAlignment = {
left: 0,
top: 0
};
return _this;
}
FocusZone.prototype.componentDidMount = function () {
var windowElement = this.refs.root.ownerDocument.defaultView;
var parentElement = Utilities_1.getParent(this.refs.root);
while (parentElement &&
parentElement !== document.body &&
parentElement.nodeType === 1) {
if (Utilities_1.isElementFocusZone(parentElement)) {
this._isInnerZone = true;
break;
}
parentElement = Utilities_1.getParent(parentElement);
}
this._events.on(windowElement, 'keydown', this._onKeyDownCapture, true);
// Assign initial tab indexes so that we can set initial focus as appropriate.
this._updateTabIndexes();
if (this.props.defaultActiveElement) {
this._activeElement = Utilities_1.getDocument().querySelector(this.props.defaultActiveElement);
this.focus();
}
};
FocusZone.prototype.componentWillUnmount = function () {
delete _allInstances[this._id];
};
FocusZone.prototype.render = function () {
var _a = this.props, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
return (React.createElement("div", __assign({}, divProps, rootProps, { className: Utilities_1.css('ms-FocusZone', className), ref: 'root', "data-focuszone-id": this._id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown, onFocus: this._onFocus }, { onMouseDownCapture: this._onMouseDown }), this.props.children));
};
/**
* Sets focus to the first tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
FocusZone.prototype.focus = function () {
if (this._activeElement && Utilities_1.elementContains(this.refs.root, this._activeElement)) {
this._activeElement.focus();
return true;
}
else {
var firstChild = this.refs.root.firstChild;
return this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true));
}
};
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* onBeforeFocus to created delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param {HTMLElement} element The child element within the zone to focus.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
FocusZone.prototype.focusElement = function (element) {
var onBeforeFocus = this.props.onBeforeFocus;
if (onBeforeFocus && !onBeforeFocus(element)) {
return false;
}
if (element) {
if (this._activeElement) {
this._activeElement.tabIndex = -1;
}
this._activeElement = element;
if (element) {
if (!this._focusAlignment) {
this._setFocusAlignment(element, true, true);
}
this._activeElement.tabIndex = 0;
element.focus();
return true;
}
}
return false;
};
FocusZone.prototype._onFocus = function (ev) {
var onActiveElementChanged = this.props.onActiveElementChanged;
if (this._isImmediateDescendantOfZone(ev.target)) {
this._activeElement = ev.target;
this._setFocusAlignment(this._activeElement);
}
else {
var parentElement = ev.target;
while (parentElement && parentElement !== this.refs.root) {
if (Utilities_1.isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) {
this._activeElement = parentElement;
break;
}
parentElement = Utilities_1.getParent(parentElement);
}
}
if (onActiveElementChanged) {
onActiveElementChanged(this._activeElement, ev);
}
};
/**
* Handle global tab presses so that we can patch tabindexes on the fly.
*/
FocusZone.prototype._onKeyDownCapture = function (ev) {
if (ev.which === Utilities_1.KeyCodes.tab) {
this._updateTabIndexes();
}
};
FocusZone.prototype._onMouseDown = function (ev) {
var disabled = this.props.disabled;
if (disabled) {
return;
}
var target = ev.target;
var path = [];
while (target && target !== this.refs.root) {
path.push(target);
target = Utilities_1.getParent(target);
}
while (path.length) {
target = path.pop();
if (Utilities_1.isElementFocusZone(target)) {
break;
}
else if (target && Utilities_1.isElementTabbable(target)) {
target.tabIndex = 0;
this._setFocusAlignment(target, true, true);
}
}
};
/**
* Handle the keystrokes.
*/
FocusZone.prototype._onKeyDown = function (ev) {
var _a = this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke;
if (disabled) {
return;
}
if (this.props.onKeyDown) {
this.props.onKeyDown(ev);
if (ev.isDefaultPrevented()) {
return;
}
}
if (isInnerZoneKeystroke &&
this._isImmediateDescendantOfZone(ev.target) &&
isInnerZoneKeystroke(ev)) {
// Try to focus
var innerZone = this._getFirstInnerZone();
if (!innerZone || !innerZone.focus()) {
return;
}
}
else if (ev.altKey) {
return;
}
else {
switch (ev.which) {
case Utilities_1.KeyCodes.space:
if (this._tryInvokeClickForFocusable(ev.target)) {
break;
}
return;
case Utilities_1.KeyCodes.left:
if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusLeft()) {
break;
}
return;
case Utilities_1.KeyCodes.right:
if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusRight()) {
break;
}
return;
case Utilities_1.KeyCodes.up:
if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusUp()) {
break;
}
return;
case Utilities_1.KeyCodes.down:
if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusDown()) {
break;
}
return;
case Utilities_1.KeyCodes.home:
var firstChild = this.refs.root.firstChild;
if (this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true))) {
break;
}
return;
case Utilities_1.KeyCodes.end:
var lastChild = this.refs.root.lastChild;
if (this.focusElement(Utilities_1.getPreviousElement(this.refs.root, lastChild, true, true, true))) {
break;
}
return;
case Utilities_1.KeyCodes.enter:
if (this._tryInvokeClickForFocusable(ev.target)) {
break;
}
return;
default:
return;
}
}
ev.preventDefault();
ev.stopPropagation();
};
/**
* Walk up the dom try to find a focusable element.
*/
FocusZone.prototype._tryInvokeClickForFocusable = function (target) {
do {
if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT') {
return false;
}
if (this._isImmediateDescendantOfZone(target) &&
target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&
target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {
Utilities_1.EventGroup.raise(target, 'click', null, true);
return true;
}
target = Utilities_1.getParent(target);
} while (target !== this.refs.root);
return false;
};
/**
* Traverse to find first child zone.
*/
FocusZone.prototype._getFirstInnerZone = function (rootElement) {
rootElement = rootElement || this._activeElement || this.refs.root;
var child = rootElement.firstElementChild;
while (child) {
if (Utilities_1.isElementFocusZone(child)) {
return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];
}
var match = this._getFirstInnerZone(child);
if (match) {
return match;
}
child = child.nextElementSibling;
}
return null;
};
FocusZone.prototype._moveFocus = function (isForward, getDistanceFromCenter, ev) {
var element = this._activeElement;
var candidateDistance = -1;
var candidateElement;
var changedFocus = false;
var isBidirectional = this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional;
if (!element) {
return false;
}
if (this._isElementInput(element)) {
if (!this._shouldInputLoseFocus(element, isForward)) {
return false;
}
}
var activeRect = isBidirectional ? element.getBoundingClientRect() : null;
do {
element = isForward ?
Utilities_1.getNextElement(this.refs.root, element) :
Utilities_1.getPreviousElement(this.refs.root, element);
if (isBidirectional) {
if (element) {
var targetRect = element.getBoundingClientRect();
var elementDistance = getDistanceFromCenter(activeRect, targetRect);
if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {
candidateDistance = elementDistance;
candidateElement = element;
}
if (candidateDistance >= 0 && elementDistance < 0) {
break;
}
}
}
else {
candidateElement = element;
break;
}
} while (element);
// Focus the closest candidate
if (candidateElement && candidateElement !== this._activeElement) {
changedFocus = true;
this.focusElement(candidateElement);
}
else if (this.props.isCircularNavigation) {
if (isForward) {
return this.focusElement(Utilities_1.getNextElement(this.refs.root, this.refs.root.firstElementChild, true));
}
else {
return this.focusElement(Utilities_1.getPreviousElement(this.refs.root, this.refs.root.lastElementChild, true, true, true));
}
}
return changedFocus;
};
FocusZone.prototype._moveFocusDown = function () {
var targetTop = -1;
var leftAlignment = this._focusAlignment.left;
if (this._moveFocus(true, function (activeRect, targetRect) {
var distance = -1;
// ClientRect values can be floats that differ by very small fractions of a decimal.
// If the difference between top and bottom are within a pixel then we should treat
// them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
// but without Math.Floor they will be handled incorrectly.
var targetRectTop = Math.floor(targetRect.top);
var activeRectBottom = Math.floor(activeRect.bottom);
if ((targetTop === -1 && targetRectTop >= activeRectBottom) ||
(targetRectTop === targetTop)) {
targetTop = targetRectTop;
if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
distance = 0;
}
else {
distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment);
}
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, false, true);
return true;
}
return false;
};
FocusZone.prototype._moveFocusUp = function () {
var targetTop = -1;
var leftAlignment = this._focusAlignment.left;
if (this._moveFocus(false, function (activeRect, targetRect) {
var distance = -1;
// ClientRect values can be floats that differ by very small fractions of a decimal.
// If the difference between top and bottom are within a pixel then we should treat
// them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
// but without Math.Floor they will be handled incorrectly.
var targetRectBottom = Math.floor(targetRect.bottom);
var targetRectTop = Math.floor(targetRect.top);
var activeRectTop = Math.floor(activeRect.top);
if ((targetTop === -1 && targetRectBottom <= activeRectTop) ||
(targetRectTop === targetTop)) {
targetTop = targetRectTop;
if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
distance = 0;
}
else {
distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment);
}
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, false, true);
return true;
}
return false;
};
FocusZone.prototype._moveFocusLeft = function () {
var _this = this;
var targetTop = -1;
var topAlignment = this._focusAlignment.top;
if (this._moveFocus(Utilities_1.getRTL(), function (activeRect, targetRect) {
var distance = -1;
if ((targetTop === -1 &&
targetRect.right <= activeRect.right &&
(_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) ||
(targetRect.top === targetTop)) {
targetTop = targetRect.top;
distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment);
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, true, false);
return true;
}
return false;
};
FocusZone.prototype._moveFocusRight = function () {
var _this = this;
var targetTop = -1;
var topAlignment = this._focusAlignment.top;
if (this._moveFocus(!Utilities_1.getRTL(), function (activeRect, targetRect) {
var distance = -1;
if ((targetTop === -1 &&
targetRect.left >= activeRect.left &&
(_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) ||
(targetRect.top === targetTop)) {
targetTop = targetRect.top;
distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment);
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, true, false);
return true;
}
return false;
};
FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) {
if (this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional &&
(!this._focusAlignment || isHorizontal || isVertical)) {
var rect = element.getBoundingClientRect();
var left = rect.left + (rect.width / 2);
var top_1 = rect.top + (rect.height / 2);
if (!this._focusAlignment) {
this._focusAlignment = { left: left, top: top_1 };
}
if (isHorizontal) {
this._focusAlignment.left = left;
}
if (isVertical) {
this._focusAlignment.top = top_1;
}
}
};
FocusZone.prototype._isImmediateDescendantOfZone = function (element) {
var parentElement = Utilities_1.getParent(element);
while (parentElement && parentElement !== this.refs.root && parentElement !== document.body) {
if (Utilities_1.isElementFocusZone(parentElement)) {
return false;
}
parentElement = Utilities_1.getParent(parentElement);
}
return true;
};
FocusZone.prototype._updateTabIndexes = function (element) {
if (!element) {
element = this.refs.root;
if (this._activeElement && !Utilities_1.elementContains(element, this._activeElement)) {
this._activeElement = null;
}
}
var childNodes = element.children;
for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
var child = childNodes[childIndex];
if (!Utilities_1.isElementFocusZone(child)) {
// If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
child.setAttribute(TABINDEX, '-1');
}
if (Utilities_1.isElementTabbable(child)) {
if (this.props.disabled) {
child.setAttribute(TABINDEX, '-1');
}
else if (!this._isInnerZone && (!this._activeElement || this._activeElement === child)) {
this._activeElement = child;
if (child.getAttribute(TABINDEX) !== '0') {
child.setAttribute(TABINDEX, '0');
}
}
else if (child.getAttribute(TABINDEX) !== '-1') {
child.setAttribute(TABINDEX, '-1');
}
}
else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {
// Disgusting IE hack. Sad face.
child.setAttribute('focusable', 'false');
}
this._updateTabIndexes(child);
}
}
};
FocusZone.prototype._isElementInput = function (element) {
if (element && element.tagName && element.tagName.toLowerCase() === 'input') {
return true;
}
return false;
};
FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) {
if (element &&
element.type &&
ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {
var selectionStart = element.selectionStart;
var selectionEnd = element.selectionEnd;
var isRangeSelected = selectionStart !== selectionEnd;
var inputValue = element.value;
// We shouldn't lose focus in the following cases:
// 1. There is range selected.
// 2. When selection start is larger than 0 and it is backward.
// 3. when selection start is not the end of lenght and it is forward.
if (isRangeSelected ||
(selectionStart > 0 && !isForward) ||
(selectionStart !== inputValue.length && isForward)) {
return false;
}
}
return true;
};
return FocusZone;
}(Utilities_1.BaseComponent));
FocusZone.defaultProps = {
isCircularNavigation: false,
direction: FocusZone_Props_1.FocusZoneDirection.bidirectional
};
__decorate([
Utilities_1.autobind
], FocusZone.prototype, "_onFocus", null);
__decorate([
Utilities_1.autobind
], FocusZone.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], FocusZone.prototype, "_onKeyDown", null);
exports.FocusZone = FocusZone;
});
//# sourceMappingURL=FocusZone.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/FocusZone.Photos.Example", "./examples/FocusZone.List.Example", "./examples/FocusZone.Disabled.Example"], function (require, exports, React, example_app_base_1, FocusZone_Photos_Example_1, FocusZone_List_Example_1, FocusZone_Disabled_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx');
var FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx');
var FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx');
var FocusZonePage = (function (_super) {
__extends(FocusZonePage, _super);
function FocusZonePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
FocusZonePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'FocusZone', componentName: 'FocusZoneExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Non-uniform photos within bidirectional FocusZone', code: FocusZonePhotosExampleCode },
React.createElement(FocusZone_Photos_Example_1.FocusZonePhotosExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nesting FocusZones in list rows', code: FocusZoneListExampleCode },
React.createElement(FocusZone_List_Example_1.FocusZoneListExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Disabled FocusZone', code: FocusZoneDisabledExampleCode },
React.createElement(FocusZone_Disabled_Example_1.FocusZoneDisabledExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current \"active\" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element."),
React.createElement("p", null, "Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return FocusZonePage;
}(React.Component));
exports.FocusZonePage = FocusZonePage;
});
//# sourceMappingURL=FocusZonePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./FocusZone", "./FocusZone.Props"], function (require, exports, FocusZone_1, FocusZone_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(FocusZone_1); __export(FocusZone_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| GroupFooter.js | 20% | (7 / 35) | 18.42% | (7 / 38) | 9.09% | (1 / 11) | 24.14% | (7 / 29) | |
| GroupFooter.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| GroupHeader.js | 10% | (7 / 70) | 8.75% | (7 / 80) | 7.14% | (1 / 14) | 10.94% | (7 / 64) | |
| GroupHeader.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| GroupSpacer.js | 20% | (1 / 5) | 0% | (0 / 2) | 0% | (0 / 2) | 20% | (1 / 5) | |
| GroupSpacer.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| GroupedList.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| GroupedList.js | 5.6% | (7 / 125) | 7.37% | (7 / 95) | 4.17% | (1 / 24) | 5.93% | (7 / 118) | |
| GroupedList.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| GroupedListPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| GroupedListSection.js | 6.3% | (8 / 127) | 7.94% | (10 / 126) | 3.57% | (1 / 28) | 6.72% | (8 / 119) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Link", "./GroupSpacer", "./GroupFooter.scss"], function (require, exports, React, Utilities_1, Link_1, GroupSpacer_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GroupFooter = (function (_super) {
__extends(GroupFooter, _super);
function GroupFooter() {
return _super !== null && _super.apply(this, arguments) || this;
}
GroupFooter.prototype.render = function () {
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, showAllLinkText = _a.showAllLinkText;
return group && (React.createElement("div", { className: Utilities_1.css('ms-groupFooter', styles.root) },
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
React.createElement(Link_1.Link, { onClick: this._onSummarizeClick }, showAllLinkText)));
};
GroupFooter.prototype._onSummarizeClick = function (ev) {
this.props.onToggleSummarize(this.props.group);
ev.stopPropagation();
ev.preventDefault();
};
return GroupFooter;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], GroupFooter.prototype, "_onSummarizeClick", null);
exports.GroupFooter = GroupFooter;
});
//# sourceMappingURL=GroupFooter.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_6007e5f1', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_6007e5f1{position:relative;padding:10px 84px;cursor:pointer}.root_6007e5f1 .ms-Link{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=GroupFooter.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../utilities/selection/index", "../../Check", "../../Icon", "./GroupSpacer", "../../Spinner", "../../FocusZone", "./GroupHeader.scss"], function (require, exports, React, Utilities_1, index_1, Check_1, Icon_1, GroupSpacer_1, Spinner_1, FocusZone_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GroupHeader = (function (_super) {
__extends(GroupHeader, _super);
function GroupHeader(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isCollapsed: _this.props.group && _this.props.group.isCollapsed,
isLoadingVisible: false
};
return _this;
}
GroupHeader.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.group) {
var newCollapsed = newProps.group.isCollapsed;
var isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
this.setState({
isCollapsed: newCollapsed,
isLoadingVisible: newLoadingVisible
});
}
};
GroupHeader.prototype.render = function () {
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, selected = _a.selected, isCollapsedGroupSelectVisible = _a.isCollapsedGroupSelectVisible;
var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
if (isCollapsedGroupSelectVisible === undefined) {
isCollapsedGroupSelectVisible = true;
}
var canSelectGroup = selectionMode === index_1.SelectionMode.multiple;
var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
var currentlySelected = isSelected || selected;
return group && (React.createElement("div", { className: Utilities_1.css('ms-GroupHeader', styles.root, (_c = {},
_c['is-selected ' + styles.rootIsSelected] = currentlySelected,
_c)), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true },
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
isSelectionCheckVisible ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-check', styles.check), "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick },
React.createElement(Check_1.Check, { checked: currentlySelected }))) : (selectionMode !== index_1.SelectionMode.none ? GroupSpacer_1.GroupSpacer({ count: 1 }) : null),
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-dropIcon', styles.dropIcon) },
React.createElement(Icon_1.Icon, { iconName: 'Tag' })),
React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-expand', styles.expand), onClick: this._onToggleCollapse },
React.createElement(Icon_1.Icon, { className: Utilities_1.css(isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)), iconName: 'ChevronDown' })),
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-title ms-font-xl', styles.title) },
React.createElement("span", null, group.name),
React.createElement("span", null,
"(",
group.count,
group.hasMoreData && '+',
")")),
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-loading', styles.loading, isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)) },
React.createElement(Spinner_1.Spinner, { label: loadingText })))));
var _c;
};
GroupHeader.prototype._onToggleCollapse = function (ev) {
var _a = this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;
var isCollapsed = this.state.isCollapsed;
var newCollapsed = !isCollapsed;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);
this.setState({
isCollapsed: newCollapsed,
isLoadingVisible: newLoadingVisible
});
if (onToggleCollapse) {
onToggleCollapse(group);
}
ev.stopPropagation();
ev.preventDefault();
};
GroupHeader.prototype._onToggleSelectGroupClick = function (ev) {
var _a = this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;
if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
ev.preventDefault();
ev.stopPropagation();
};
GroupHeader.prototype._onHeaderClick = function () {
var _a = this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;
if (onGroupHeaderClick) {
onGroupHeaderClick(group);
}
else if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
};
return GroupHeader;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], GroupHeader.prototype, "_onToggleCollapse", null);
__decorate([
Utilities_1.autobind
], GroupHeader.prototype, "_onToggleSelectGroupClick", null);
__decorate([
Utilities_1.autobind
], GroupHeader.prototype, "_onHeaderClick", null);
exports.GroupHeader = GroupHeader;
});
//# sourceMappingURL=GroupHeader.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_42b4e1bd', rootIsSelected: 'rootIsSelected_42b4e1bd', check: 'check_42b4e1bd', expand: 'expand_42b4e1bd', title: 'title_42b4e1bd', expandIsCollapsed: 'expandIsCollapsed_42b4e1bd', loading: 'loading_42b4e1bd', loadingIsVisible: 'loadingIsVisible_42b4e1bd', dropIcon: 'dropIcon_42b4e1bd', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_42b4e1bd{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_42b4e1bd::-moz-focus-inner{border:0}.root_42b4e1bd{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_42b4e1bd:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.root_42b4e1bd:hover{background:" }, { "theme": "themeLighterAlt", "defaultValue": "#eff6fc" }, { "rawString": "}.root_42b4e1bd.rootIsSelected_42b4e1bd{background:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_42b4e1bd.rootIsSelected_42b4e1bd:hover{background:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.check_42b4e1bd,.expand_42b4e1bd{display:inline-block;cursor:default;padding:6px;-webkit-transform:translateY(50%);transform:translateY(50%);margin-top:-12px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;font-size:12px;top:4px}.check_42b4e1bd::-moz-focus-inner,.expand_42b4e1bd::-moz-focus-inner{border:0}.check_42b4e1bd,.expand_42b4e1bd{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_42b4e1bd:focus:after,.ms-Fabric.is-focusVisible .expand_42b4e1bd:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.check_42b4e1bd{opacity:0;margin-top:-10px}.check_42b4e1bd:focus{opacity:1}.root_42b4e1bd.rootIsSelected_42b4e1bd .check_42b4e1bd,.root_42b4e1bd:hover .check_42b4e1bd{opacity:1}.title_42b4e1bd{padding:14px 6px;display:inline-block;cursor:pointer;outline:0}.expand_42b4e1bd{width:36px;height:40px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.expand_42b4e1bd .ms-Icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.expand_42b4e1bd .ms-Icon.expandIsCollapsed_42b4e1bd{-webkit-transform:rotate(0);transform:rotate(0)}.loading_42b4e1bd{display:inline-block;visibility:hidden;opacity:0;padding:0 16px;vertical-align:middle;transition:visibility 367ms,opacity 367ms}.loading_42b4e1bd.loadingIsVisible_42b4e1bd{visibility:visible;opacity:1}.dropIcon_42b4e1bd{display:inline-block;position:relative;top:-16px;font-size:20px;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";transition:opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);opacity:0;-webkit-transform:rotate(.2deg) scale(.65);transform:rotate(.2deg) scale(.65);-webkit-transform-origin:10px 10px;transform-origin:10px 10px}html[dir=ltr] .dropIcon_42b4e1bd{left:-26px}html[dir=rtl] .dropIcon_42b4e1bd{right:-26px}.dropIcon_42b4e1bd .ms-Icon--Tag{position:absolute}.ms-GroupedList-group.is-dropping>.root_42b4e1bd .dropIcon_42b4e1bd{transition:opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition-delay:367ms;opacity:1;-webkit-transform:rotate(.2deg) scale(1);transform:rotate(.2deg) scale(1)}.ms-GroupedList-group.is-dropping .check_42b4e1bd{opacity:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=GroupHeader.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 | define(["require", "exports", "react", "../../Utilities", "./GroupSpacer.scss"], function (require, exports, React, Utilities_1, styles) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var SPACER_WIDTH = 36; exports.GroupSpacer = function (props) { return props.count > 0 && (React.createElement("span", { className: Utilities_1.css('ms-GroupSpacer', styles.root), style: { width: props.count * SPACER_WIDTH } })); }; }); //# sourceMappingURL=GroupSpacer.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_09bd7717', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_09bd7717{display:inline-block}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=GroupSpacer.scss.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=GroupedList.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./GroupedListSection", "../../List", "../../utilities/selection/index", "./GroupedList.scss"], function (require, exports, React, Utilities_1, GroupedListSection_1, List_1, index_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GroupedList = (function (_super) {
__extends(GroupedList, _super);
function GroupedList(props) {
var _this = _super.call(this, props) || this;
_this._isSomeGroupExpanded = _this._computeIsSomeGroupExpanded(props.groups);
_this.state = {
lastWidth: 0,
groups: props.groups
};
return _this;
}
GroupedList.prototype.componentWillReceiveProps = function (newProps) {
var _a = this.props, groups = _a.groups, selectionMode = _a.selectionMode;
var shouldForceUpdates = false;
if (newProps.groups !== groups) {
this.setState({ groups: newProps.groups });
shouldForceUpdates = true;
}
if (newProps.selectionMode !== selectionMode) {
shouldForceUpdates = true;
}
if (shouldForceUpdates) {
this._forceListUpdates();
}
};
GroupedList.prototype.render = function () {
var className = this.props.className;
var groups = this.state.groups;
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-GroupedList', styles.root, className), "data-automationid": 'GroupedList', "data-is-scrollable": 'false', role: 'grid' }, !groups ?
this._renderGroup(null, 0) : (React.createElement(List_1.List, { ref: 'list', items: groups, onRenderCell: this._renderGroup, getItemCountForPage: function () { return 1; } }))));
};
GroupedList.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this._forceListUpdates();
};
GroupedList.prototype.toggleCollapseAll = function (allCollapsed) {
var groups = this.state.groups;
var groupProps = this.props.groupProps;
var onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
if (groups) {
if (onToggleCollapseAll) {
onToggleCollapseAll(allCollapsed);
}
for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) {
groups[groupIndex].isCollapsed = allCollapsed;
}
this._updateIsSomeGroupExpanded();
this.forceUpdate();
}
};
GroupedList.prototype._renderGroup = function (group, groupIndex) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, groupProps = _a.groupProps, items = _a.items, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selectionMode = _a.selectionMode, selection = _a.selection, viewport = _a.viewport;
// override group header/footer props as needed
var dividerProps = {
onToggleSelectGroup: this._onToggleSelectGroup,
onToggleCollapse: this._onToggleCollapse,
onToggleSummarize: this._onToggleSummarize
};
var headerProps = Utilities_1.assign({}, groupProps.headerProps, dividerProps);
var footerProps = Utilities_1.assign({}, groupProps.footerProps, dividerProps);
var groupNestingDepth = this._getGroupNestingDepth();
return (!group || group.count > 0) ? (React.createElement(GroupedListSection_1.GroupedListSection, { ref: 'group_' + groupIndex, key: this._getGroupKey(group, groupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: groupProps && groupProps.getGroupItemLimit, group: group, groupIndex: groupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, listProps: listProps, items: items, onRenderCell: onRenderCell, onRenderGroupHeader: groupProps.onRenderHeader, onRenderGroupFooter: groupProps.onRenderFooter, selectionMode: selectionMode, selection: selection, viewport: viewport })) : null;
};
GroupedList.prototype._getGroupKey = function (group, index) {
return 'group-' + ((group && group.key) ? group.key : String(index));
};
GroupedList.prototype._getGroupNestingDepth = function () {
var groups = this.state.groups;
var level = 0;
var groupsInLevel = groups;
while (groupsInLevel && groupsInLevel.length > 0) {
level++;
groupsInLevel = groupsInLevel[0].children;
}
return level;
};
GroupedList.prototype._onToggleCollapse = function (group) {
var groupProps = this.props.groupProps;
var onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
if (group) {
if (onToggleCollapse) {
onToggleCollapse(group);
}
group.isCollapsed = !group.isCollapsed;
this._updateIsSomeGroupExpanded();
this.forceUpdate();
}
};
GroupedList.prototype._onToggleSelectGroup = function (group) {
if (group) {
this.props.selection.toggleRangeSelected(group.startIndex, group.count);
}
};
GroupedList.prototype._forceListUpdates = function (groups) {
groups = groups || this.state.groups;
var groupCount = groups ? groups.length : 1;
if (this.refs.list) {
this.refs.list.forceUpdate();
for (var i = 0; i < groupCount; i++) {
var group = this.refs.list.refs['group_' + String(i)];
if (group) {
group.forceListUpdate();
}
}
}
else {
var group = this.refs['group_' + String(0)];
if (group) {
group.forceListUpdate();
}
}
};
GroupedList.prototype._onToggleSummarize = function (group) {
var groupProps = this.props.groupProps;
var onToggleSummarize = groupProps && groupProps.footerProps && groupProps.footerProps.onToggleSummarize;
if (onToggleSummarize) {
onToggleSummarize(group);
}
else {
if (group) {
group.isShowingAll = !group.isShowingAll;
}
this.forceUpdate();
}
};
GroupedList.prototype._computeIsSomeGroupExpanded = function (groups) {
var _this = this;
return groups && groups.some(function (group) { return group.children ? _this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed; });
};
GroupedList.prototype._updateIsSomeGroupExpanded = function () {
var groups = this.state.groups;
var onGroupExpandStateChanged = this.props.onGroupExpandStateChanged;
var newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);
if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) {
if (onGroupExpandStateChanged) {
onGroupExpandStateChanged(newIsSomeGroupExpanded);
}
this._isSomeGroupExpanded = newIsSomeGroupExpanded;
}
};
return GroupedList;
}(Utilities_1.BaseComponent));
GroupedList.defaultProps = {
selectionMode: index_1.SelectionMode.multiple,
isHeaderVisible: true,
groupProps: {}
};
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_renderGroup", null);
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_onToggleCollapse", null);
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_onToggleSelectGroup", null);
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_onToggleSummarize", null);
exports.GroupedList = GroupedList;
});
//# sourceMappingURL=GroupedList.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_5dfb4d97', group: 'group_5dfb4d97', groupIsDropping: 'groupIsDropping_5dfb4d97', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_5dfb4d97{position:relative;font-size:12px}.root_5dfb4d97 BUTTON{font-family:inherit;background-color:transparent}.group_5dfb4d97{transition:background-color 267ms cubic-bezier(.445,.05,.55,.95)}.groupIsDropping_5dfb4d97{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_5dfb4d97 .ms-List-cell{min-height:38px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=GroupedList.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/GroupedList.Basic.Example", "./examples/GroupedList.Custom.Example"], function (require, exports, React, example_app_base_1, GroupedList_Basic_Example_1, GroupedList_Custom_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GroupedListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Basic.Example.tsx');
var GroupedListCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx');
var GroupedListPage = (function (_super) {
__extends(GroupedListPage, _super);
function GroupedListPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
GroupedListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'GroupedList', componentName: 'GroupedListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'GroupedList basic example', isOptIn: true, code: GroupedListBasicExampleCode },
React.createElement(GroupedList_Basic_Example_1.GroupedListBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'GroupedList example with custom header and footer', isOptIn: true, code: GroupedListCustomExampleCode },
React.createElement(GroupedList_Custom_Example_1.GroupedListCustomExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/GroupedList.Props.ts')
] }), overview: React.createElement("p", null, "Allows you to render a set of items as multiple lists with various grouping properties."), isHeaderVisible: this.props.isHeaderVisible }));
};
return GroupedListPage;
}(React.Component));
exports.GroupedListPage = GroupedListPage;
});
//# sourceMappingURL=GroupedListPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../utilities/selection/index", "./GroupFooter", "./GroupHeader", "../../List", "../../Utilities", "./GroupedList.scss"], function (require, exports, React, Utilities_1, index_1, GroupFooter_1, GroupHeader_1, List_1, Utilities_2, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var GroupedListSection = (function (_super) {
__extends(GroupedListSection, _super);
function GroupedListSection(props) {
var _this = _super.call(this, props) || this;
var selection = props.selection, group = props.group;
_this._subGroups = {};
_this.state = {
isDropping: false,
isSelected: (selection && group) ? selection.isRangeSelected(group.startIndex, group.count) : false
};
return _this;
}
GroupedListSection.prototype.componentDidMount = function () {
var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection;
if (dragDropHelper) {
this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
}
if (selection) {
this._events.on(selection, index_1.SELECTION_CHANGE, this._onSelectionChange);
}
};
GroupedListSection.prototype.componentWillUnmount = function () {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
}
};
GroupedListSection.prototype.componentDidUpdate = function (previousProps) {
if (this.props.group !== previousProps.group ||
this.props.groupIndex !== previousProps.groupIndex ||
this.props.dragDropHelper !== previousProps.dragDropHelper) {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
}
}
};
GroupedListSection.prototype.render = function () {
var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupFooter, onRenderGroupFooter = _c === void 0 ? this._onRenderGroupFooter : _c;
var isSelected = this.state.isSelected;
var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
var isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll &&
(group.count > renderCount || group.hasMoreData);
var hasNestedGroups = group && group.children && group.children.length > 0;
var dividerProps = {
group: group,
groupIndex: groupIndex,
groupLevel: group ? group.level : 0,
isSelected: isSelected,
viewport: viewport,
selectionMode: selectionMode
};
var groupHeaderProps = Utilities_2.assign({}, headerProps, dividerProps);
var groupFooterProps = Utilities_2.assign({}, footerProps, dividerProps);
return (React.createElement("div", { ref: 'root', className: Utilities_2.css('ms-GroupedList-group', styles.group, this._getDroppingClassName()) },
onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader),
group && group.isCollapsed ?
null :
(hasNestedGroups ?
(React.createElement(List_1.List, { ref: 'list', items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: function () { return 1; } })) :
this._onRenderGroup(renderCount)),
isFooterVisible && onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter)));
};
GroupedListSection.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this.forceListUpdate();
};
GroupedListSection.prototype.forceListUpdate = function () {
var group = this.props.group;
if (this.refs.list) {
this.refs.list.forceUpdate();
if (group && group.children && group.children.length > 0) {
var subGroupCount = group.children.length;
for (var i = 0; i < subGroupCount; i++) {
var subGroup = this.refs.list.refs['subGroup_' + String(i)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
}
}
else {
var subGroup = this.refs['subGroup_' + String(0)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
};
GroupedListSection.prototype._onRenderGroupHeader = function (props) {
return React.createElement(GroupHeader_1.GroupHeader, __assign({}, props));
};
GroupedListSection.prototype._onRenderGroupFooter = function (props) {
return React.createElement(GroupFooter_1.GroupFooter, __assign({}, props));
};
GroupedListSection.prototype._onSelectionChange = function () {
var _a = this.props, group = _a.group, selection = _a.selection;
var isSelected = selection.isRangeSelected(group.startIndex, group.count);
if (isSelected !== this.state.isSelected) {
this.setState({ isSelected: isSelected });
}
};
GroupedListSection.prototype._onRenderGroup = function (renderCount) {
var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth;
var count = group ? group.count : items.length;
var startIndex = group ? group.startIndex : 0;
return (React.createElement(List_1.List, __assign({ items: items, onRenderCell: function (item, itemIndex) { return onRenderCell(groupNestingDepth, item, itemIndex); }, ref: 'list', renderCount: Math.min(count, renderCount), startIndex: startIndex }, listProps)));
};
GroupedListSection.prototype._renderSubGroup = function (subGroup, subGroupIndex) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, items = _a.items, headerProps = _a.headerProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupFooter = _a.onRenderGroupFooter;
return (!subGroup || subGroup.count > 0) ? (React.createElement(GroupedListSection, { ref: 'subGroup_' + subGroupIndex, key: this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupFooter: onRenderGroupFooter })) : null;
};
GroupedListSection.prototype._getGroupKey = function (group, index) {
return 'group-' + ((group && group.key) ? group.key : String(group.level) + String(index));
};
/**
* collect all the data we need to enable drag/drop for a group
*/
GroupedListSection.prototype._getGroupDragDropOptions = function () {
var _a = this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
var options = {
eventMap: eventsToRegister,
selectionIndex: -1,
context: { data: group, index: groupIndex, isGroup: true },
canDrag: function () { return false; },
canDrop: dragDropEvents.canDrop,
onDragStart: null,
updateDropState: this._updateDroppingState
};
return options;
};
/**
* update groupIsDropping state based on the input value, which is used to change style during drag and drop
*
* @private
* @param {boolean} newValue (new isDropping state value)
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
*/
GroupedListSection.prototype._updateDroppingState = function (newIsDropping, event) {
var isDropping = this.state.isDropping;
var dragDropEvents = this.props.dragDropEvents;
if (!isDropping) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(event, null);
}
}
else {
if (dragDropEvents.onDragEnter) {
dragDropEvents.onDragEnter(event, null);
}
}
if (isDropping !== newIsDropping) {
this.setState({ isDropping: newIsDropping });
}
};
/**
* get the correct css class to reflect the dropping state for a given group
*
* If the group is the current drop target, return the default dropping class name
* Otherwise, return '';
*
*/
GroupedListSection.prototype._getDroppingClassName = function () {
var isDropping = this.state.isDropping;
var group = this.props.group;
isDropping = !!(group && isDropping);
return Utilities_2.css(isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && styles.groupIsDropping);
};
return GroupedListSection;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_onRenderGroupHeader", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_onRenderGroupFooter", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_renderSubGroup", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_getGroupDragDropOptions", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_updateDroppingState", null);
exports.GroupedListSection = GroupedListSection;
});
//# sourceMappingURL=GroupedListSection.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./GroupedList"], function (require, exports, GroupedList_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(GroupedList_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Icon.Props.js | 12.5% | (1 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 12.5% | (1 / 8) | |
| Icon.js | 11.76% | (2 / 17) | 21.43% | (3 / 14) | 0% | (0 / 3) | 12.5% | (2 / 16) | |
| Icon.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| IconName.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| IconPage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // Please keep alphabetized var IconType; (function (IconType) { /** * Render using the fabric icon font. */ IconType[IconType["default"] = 0] = "default"; /** * Render using an image, where imageProps would be used. */ IconType[IconType["image"] = 1] = "image"; /** * Deprecated, use default. * @deprecated */ IconType[IconType["Default"] = 100000] = "Default"; /** * Deprecated, use image. * @deprecated */ IconType[IconType["Image"] = 100001] = "Image"; })(IconType = exports.IconType || (exports.IconType = {})); }); //# sourceMappingURL=Icon.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 2 2 | var __assign = (this && this.__assign) || Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; define(["require", "exports", "react", "./Icon.scss", "./Icon.Props", "../Image/Image", "../../Utilities"], function (require, exports, React, styles, Icon_Props_1, Image_1, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Icon = function (props) { var customIcon = props.iconName === 'None'; var iconClassName = props.iconName ? ('ms-Icon--' + props.iconName) : ''; if (props.iconType === Icon_Props_1.IconType.image || props.iconType === Icon_Props_1.IconType.Image) { var containerClassName = Utilities_1.css('ms-Icon', 'ms-Icon-imageContainer', styles.imageContainer, props.className); return (React.createElement("div", { className: containerClassName }, React.createElement(Image_1.Image, __assign({}, props.imageProps)))); } else { var className = Utilities_1.css('ms-Icon', customIcon ? '' : iconClassName, props.className); return React.createElement("i", __assign({}, Utilities_1.getNativeProps(props, Utilities_1.htmlElementProperties), { className: className })); } }; }); //# sourceMappingURL=Icon.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { imageContainer: 'imageContainer_0bf24413', }; load_themed_styles_1.loadStyles([{ "rawString": ".imageContainer_0bf24413{overflow:hidden}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Icon.scss.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=IconName.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Icon.Basic.Example", "./examples/Icon.Color.Example", "./examples/Icon.ImageSheet.Example"], function (require, exports, React, example_app_base_1, Icon_Basic_Example_1, Icon_Color_Example_1, Icon_ImageSheet_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var IconBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx');
var IconColorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx');
var IconImageSheetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx');
var IconPage = (function (_super) {
__extends(IconPage, _super);
function IconPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
IconPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Icon', componentName: 'IconExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon', code: IconBasicExampleCode },
React.createElement(Icon_Basic_Example_1.IconBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon with custom color', code: IconColorExampleCode },
React.createElement(Icon_Color_Example_1.IconColorExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon using image sheet', code: IconImageSheetExampleCode },
React.createElement(Icon_ImageSheet_Example_1.IconImageSheetExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Icon/Icon.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "In a computer's graphical user interface ( GUI ), an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image such as a company's logo.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Adjust to proper size to highlight importance but not occupying too much space."),
React.createElement("li", null, "Be simple and concise."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Icons to show pictures."),
React.createElement("li", null, "Use photos or long sentences as icons."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return IconPage;
}(React.Component));
exports.IconPage = IconPage;
});
//# sourceMappingURL=IconPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Icon", "./Icon.Props"], function (require, exports, Icon_1, Icon_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Icon_1); __export(Icon_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Image.Props.js | 7.14% | (1 / 14) | 0% | (0 / 4) | 0% | (0 / 3) | 7.14% | (1 / 14) | |
| Image.js | 8.25% | (8 / 97) | 10.42% | (10 / 96) | 5.56% | (1 / 18) | 8.89% | (8 / 90) | |
| Image.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| ImagePage.js | 22.22% | (6 / 27) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 25% | (6 / 24) | |
| ImagePage.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * The possible methods that can be used to fit the image. */ var ImageFit; (function (ImageFit) { /** * The image is not scaled. The image is centered and cropped within the content box. */ ImageFit[ImageFit["center"] = 0] = "center"; /** * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of * the frame will be empty depending on the difference in aspect ratio between the image and the frame. */ ImageFit[ImageFit["contain"] = 1] = "contain"; /** * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped from * the top and bottom, or from the sides, depending on the difference in aspect ratio between the image and the frame. */ ImageFit[ImageFit["cover"] = 2] = "cover"; /** * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the * frame will have empty space. */ ImageFit[ImageFit["none"] = 3] = "none"; })(ImageFit = exports.ImageFit || (exports.ImageFit = {})); var ImageLoadState; (function (ImageLoadState) { /** * The image has not yet been loaded, and there is no error yet. */ ImageLoadState[ImageLoadState["notLoaded"] = 0] = "notLoaded"; /** * The image has been loaded successfully. */ ImageLoadState[ImageLoadState["loaded"] = 1] = "loaded"; /** * An error has been encountered while loading the image. */ ImageLoadState[ImageLoadState["error"] = 2] = "error"; /** * Deprecated at v1.3.6, to replace the src in case of errors, use onLoadingStateChange instead * and rerender the Image with a difference src. * @deprecated */ ImageLoadState[ImageLoadState["errorLoaded"] = 3] = "errorLoaded"; })(ImageLoadState = exports.ImageLoadState || (exports.ImageLoadState = {})); }); //# sourceMappingURL=Image.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./Image.Props", "./Image.scss"], function (require, exports, React, Utilities_1, Image_Props_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CoverStyle;
(function (CoverStyle) {
CoverStyle[CoverStyle["landscape"] = 0] = "landscape";
CoverStyle[CoverStyle["portrait"] = 1] = "portrait";
})(CoverStyle = exports.CoverStyle || (exports.CoverStyle = {}));
exports.CoverStyleMap = (_a = {},
_a[CoverStyle.landscape] = 'ms-Image-image--landscape ' + styles.imageIsLandscape,
_a[CoverStyle.portrait] = 'ms-Image-image--portrait ' + styles.imageIsPortrait,
_a);
exports.ImageFitMap = (_b = {},
_b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center ' + styles.imageIsCenter,
_b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain ' + styles.imageIsContain,
_b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover ' + styles.imageIsCover,
_b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none ' + styles.imageIsNone,
_b);
var KEY_PREFIX = 'fabricImage';
var Image = (function (_super) {
__extends(Image, _super);
function Image(props) {
var _this = _super.call(this, props) || this;
// Make an initial assumption about the image layout until we can
// check the rendered element. The value here only takes effect when
// shouldStartVisible is true.
_this._coverStyle = CoverStyle.portrait;
_this.state = {
loadState: Image_Props_1.ImageLoadState.notLoaded
};
return _this;
}
Image.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.src !== this.props.src) {
this.setState({
loadState: Image_Props_1.ImageLoadState.notLoaded
});
}
else if (this.state.loadState === Image_Props_1.ImageLoadState.loaded) {
this._computeCoverStyle(nextProps);
}
};
Image.prototype.componentDidUpdate = function (prevProps, prevState) {
this._checkImageLoaded();
if (this.props.onLoadingStateChange
&& prevState.loadState !== this.state.loadState) {
this.props.onLoadingStateChange(this.state.loadState);
}
};
Image.prototype.render = function () {
var imageProps = Utilities_1.getNativeProps(this.props, Utilities_1.imageProperties, ['width', 'height']);
var _a = this.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, shouldFadeIn = _a.shouldFadeIn, className = _a.className, imageFit = _a.imageFit, role = _a.role, maximizeFrame = _a.maximizeFrame;
var loadState = this.state.loadState;
var coverStyle = this._coverStyle;
var loaded = loadState === Image_Props_1.ImageLoadState.loaded || (loadState === Image_Props_1.ImageLoadState.notLoaded && this.props.shouldStartVisible);
// If image dimensions aren't specified, the natural size of the image is used.
return (React.createElement("div", { className: Utilities_1.css('ms-Image', styles.root, className, (_b = {},
_b['ms-Image--maximizeFrame ' + styles.rootIsMaximizeFrame] = maximizeFrame,
_b)), style: { width: width, height: height }, ref: this._resolveRef('_frameElement') },
React.createElement("img", __assign({}, imageProps, { onLoad: this._onImageLoaded, onError: this._onImageError, key: KEY_PREFIX + this.props.src || '', className: Utilities_1.css('ms-Image-image', styles.image, exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], (_c = {
'is-fadeIn': shouldFadeIn,
'is-notLoaded': !loaded
},
_c['is-loaded ' + styles.imageIsLoaded] = loaded,
_c['ms-u-fadeIn400'] = loaded && shouldFadeIn,
_c['is-error'] = loadState === Image_Props_1.ImageLoadState.error,
_c['ms-Image-image--scaleWidth ' + styles.imageIsScaleWidth] = (imageFit === undefined && !!width && !height),
_c['ms-Image-image--scaleHeight ' + styles.imageIsScaleHeight] = (imageFit === undefined && !width && !!height),
_c['ms-Image-image--scaleWidthHeight ' + styles.imageIsScaleWidthHeight] = (imageFit === undefined && !!width && !!height),
_c)), ref: this._resolveRef('_imageElement'), src: src, alt: alt, role: role }))));
var _b, _c;
};
Image.prototype._onImageLoaded = function (ev) {
var _a = this.props, src = _a.src, onLoad = _a.onLoad;
if (onLoad) {
onLoad(ev);
}
this._computeCoverStyle(this.props);
if (src) {
this.setState({
loadState: Image_Props_1.ImageLoadState.loaded
});
}
};
Image.prototype._checkImageLoaded = function () {
var src = this.props.src;
var loadState = this.state.loadState;
if (loadState === Image_Props_1.ImageLoadState.notLoaded) {
// testing if naturalWidth and naturalHeight are greater than zero is better than checking
// .complete, because .complete will also be set to true if the image breaks. However,
// for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back
// to checking .complete for these images.
var isLoaded = src && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) ||
(this._imageElement.complete && Image._svgRegex.test(src));
if (isLoaded) {
this._computeCoverStyle(this.props);
this.setState({
loadState: Image_Props_1.ImageLoadState.loaded
});
}
}
};
Image.prototype._computeCoverStyle = function (props) {
var imageFit = props.imageFit, width = props.width, height = props.height;
if (imageFit === Image_Props_1.ImageFit.cover || imageFit === Image_Props_1.ImageFit.contain) {
if (this._imageElement) {
// Determine the desired ratio using the width and height props.
// If those props aren't available, measure measure the frame.
var desiredRatio = void 0;
if (!!width && !!height) {
desiredRatio = width / height;
}
else {
desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
}
// Examine the source image to determine its original ratio.
var naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
// Should we crop from the top or the sides?
if (naturalRatio > desiredRatio) {
this._coverStyle = CoverStyle.landscape;
}
else {
this._coverStyle = CoverStyle.portrait;
}
}
}
};
Image.prototype._onImageError = function (ev) {
if (this.props.onError) {
this.props.onError(ev);
}
this.setState({
loadState: Image_Props_1.ImageLoadState.error
});
};
return Image;
}(Utilities_1.BaseComponent));
Image.defaultProps = {
shouldFadeIn: true
};
Image._svgRegex = /\.svg$/i;
__decorate([
Utilities_1.autobind
], Image.prototype, "_onImageLoaded", null);
__decorate([
Utilities_1.autobind
], Image.prototype, "_onImageError", null);
exports.Image = Image;
var _a, _b;
});
//# sourceMappingURL=Image.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_ea778207', rootIsMaximizeFrame: 'rootIsMaximizeFrame_ea778207', image: 'image_ea778207', imageIsLoaded: 'imageIsLoaded_ea778207', imageIsCenter: 'imageIsCenter_ea778207', imageIsContain: 'imageIsContain_ea778207', imageIsCover: 'imageIsCover_ea778207', imageIsLandscape: 'imageIsLandscape_ea778207', imageIsPortrait: 'imageIsPortrait_ea778207', imageIsNone: 'imageIsNone_ea778207', imageIsScaleWidthHeight: 'imageIsScaleWidthHeight_ea778207', imageIsScaleWidth: 'imageIsScaleWidth_ea778207', imageIsScaleHeight: 'imageIsScaleHeight_ea778207', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_ea778207{overflow:hidden}.rootIsMaximizeFrame_ea778207{height:100%;width:100%}.image_ea778207{display:block;opacity:0}.image_ea778207.imageIsLoaded_ea778207{opacity:1}.imageIsCenter_ea778207,.imageIsContain_ea778207,.imageIsCover_ea778207{position:relative;top:50%}html[dir=ltr] .imageIsCenter_ea778207,html[dir=ltr] .imageIsContain_ea778207,html[dir=ltr] .imageIsCover_ea778207{left:50%}html[dir=rtl] .imageIsCenter_ea778207,html[dir=rtl] .imageIsContain_ea778207,html[dir=rtl] .imageIsCover_ea778207{right:50%}html[dir=ltr] .imageIsCenter_ea778207,html[dir=ltr] .imageIsContain_ea778207,html[dir=ltr] .imageIsCover_ea778207{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}html[dir=rtl] .imageIsCenter_ea778207,html[dir=rtl] .imageIsContain_ea778207,html[dir=rtl] .imageIsCover_ea778207{-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.imageIsContain_ea778207.imageIsLandscape_ea778207{width:100%;height:auto}.imageIsContain_ea778207.imageIsPortrait_ea778207{height:100%;width:auto}.imageIsCover_ea778207.imageIsLandscape_ea778207{height:100%;width:auto}.imageIsCover_ea778207.imageIsPortrait_ea778207{width:100%;height:auto}.imageIsNone_ea778207{height:auto;width:auto}.imageIsScaleWidthHeight_ea778207{height:100%;width:100%}.imageIsScaleWidth_ea778207{height:auto;width:100%}.imageIsScaleHeight_ea778207{height:100%;width:auto}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Image.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Image.Default.Example", "./examples/Image.Center.Example", "./examples/Image.Contain.Example", "./examples/Image.Cover.Example", "./examples/Image.None.Example", "./examples/Image.MaximizeFrame.Example", "./ImagePage.scss"], function (require, exports, React, example_app_base_1, Image_Default_Example_1, Image_Center_Example_1, Image_Contain_Example_1, Image_Cover_Example_1, Image_None_Example_1, Image_MaximizeFrame_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ImageDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx');
var ImageCenterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx');
var ImageContainExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx');
var ImageCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx');
var ImageNoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx');
var ImageMaximizeFrameExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx');
var ImagePage = (function (_super) {
__extends(ImagePage, _super);
function ImagePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ImagePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Image', componentName: 'ImageExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Not specified', code: ImageDefaultExampleCode },
React.createElement(Image_Default_Example_1.ImageDefaultExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: None', code: ImageNoneExampleCode },
React.createElement(Image_None_Example_1.ImageNoneExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Center', code: ImageCenterExampleCode },
React.createElement(Image_Center_Example_1.ImageCenterExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Contain', code: ImageContainExampleCode },
React.createElement(Image_Contain_Example_1.ImageContainExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Cover', code: ImageCoverExampleCode },
React.createElement(Image_Cover_Example_1.ImageCoverExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Maximizing the image frame', code: ImageMaximizeFrameExampleCode },
React.createElement(Image_MaximizeFrame_Example_1.ImageMaximizeFrameExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Image/Image.Props.ts')
] }), overview: React.createElement("div", null, "Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame."), isHeaderVisible: this.props.isHeaderVisible }));
};
return ImagePage;
}(React.Component));
exports.ImagePage = ImagePage;
});
//# sourceMappingURL=ImagePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = {}; load_themed_styles_1.loadStyles([{ "rawString": ".ImageExample .ms-Image{border:2px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";margin-bottom:20px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ImagePage.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Image", "./Image.Props"], function (require, exports, Image_1, Image_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Image_1); __export(Image_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Label.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Label.js | 23.33% | (7 / 30) | 35% | (7 / 20) | 10% | (1 / 10) | 26.92% | (7 / 26) | |
| Label.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| LabelPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Label.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./Label.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Label = (function (_super) {
__extends(Label, _super);
function Label() {
return _super !== null && _super.apply(this, arguments) || this;
}
Label.prototype.render = function () {
var _a = this.props, disabled = _a.disabled, required = _a.required, children = _a.children, className = _a.className;
return (React.createElement("label", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: Utilities_1.css(styles.root, 'ms-Label', className, (_b = {
'is-disabled': disabled,
'is-required': required
},
_b[styles.isDisabled] = disabled,
_b[styles.isRequired] = required,
_b)) }), children));
var _b;
};
return Label;
}(Utilities_1.BaseComponent));
exports.Label = Label;
});
//# sourceMappingURL=Label.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_470d28ae', isRequired: 'isRequired_470d28ae', isDisabled: 'isDisabled_470d28ae', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_470d28ae{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";box-sizing:border-box;display:block;padding:5px 0;word-break:break-all}.isRequired_470d28ae::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.isDisabled_470d28ae{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Label.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Label.Basic.Example"], function (require, exports, React, example_app_base_1, Label_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx');
var LabelPage = (function (_super) {
__extends(LabelPage, _super);
function LabelPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
LabelPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Label', componentName: 'LabelExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Label', code: LabelBasicExampleCode },
React.createElement(Label_Basic_Example_1.LabelBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Label/Label.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use sentence casing, e.g. \u201CFirst name\u201D."),
React.createElement("li", null, "Be short and concise."),
React.createElement("li", null, "When adding a Label to components, use the text as a noun or short noun phrase."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Labels as instructional text, e.g. \u201CClick to get started\u201D."),
React.createElement("li", null, "Don\u2019t use full sentences or complex punctuation (colons, semicolons, etc.)."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Label/Label.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return LabelPage;
}(React.Component));
exports.LabelPage = LabelPage;
});
//# sourceMappingURL=LabelPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Label"], function (require, exports, Label_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Label_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Layer.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Layer.js | 7.5% | (6 / 80) | 10.26% | (4 / 39) | 5% | (1 / 20) | 8% | (6 / 75) | |
| Layer.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| LayerHost.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| LayerHost.js | 20.59% | (7 / 34) | 35% | (7 / 20) | 7.69% | (1 / 13) | 23.33% | (7 / 30) | |
| LayerPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Layer.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "react-dom", "../../Fabric", "../../Utilities", "./Layer.scss"], function (require, exports, React, ReactDOM, Fabric_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _layersByHostId = {};
var Layer = (function (_super) {
__extends(Layer, _super);
function Layer(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
onLayerMounted: 'onLayerDidMount'
});
if (_this.props.hostId) {
if (!_layersByHostId[_this.props.hostId]) {
_layersByHostId[_this.props.hostId] = [];
}
_layersByHostId[_this.props.hostId].push(_this);
}
return _this;
}
/**
* Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
* care about the specific host.
*/
Layer.notifyHostChanged = function (id) {
if (_layersByHostId[id]) {
_layersByHostId[id].forEach(function (layer) { return layer.forceUpdate(); });
}
};
Layer.prototype.componentDidMount = function () {
this.componentDidUpdate();
};
Layer.prototype.componentWillUnmount = function () {
var _this = this;
this._removeLayerElement();
if (this.props.hostId) {
_layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(function (layer) { return layer !== _this; });
if (!_layersByHostId[this.props.hostId].length) {
delete _layersByHostId[this.props.hostId];
}
}
};
Layer.prototype.componentDidUpdate = function () {
var _this = this;
var host = this._getHost();
if (host !== this._host) {
this._removeLayerElement();
}
if (host) {
this._host = host;
if (!this._layerElement) {
var doc = Utilities_1.getDocument(this._rootElement);
this._layerElement = doc.createElement('div');
this._layerElement.className = Utilities_1.css('ms-Layer', (_a = {},
_a['ms-Layer--fixed ' + styles.rootIsFixed] = !this.props.hostId,
_a));
host.appendChild(this._layerElement);
Utilities_1.setVirtualParent(this._layerElement, this._rootElement);
}
// Using this 'unstable' method allows us to retain the React context across the layer projection.
ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(Fabric_1.Fabric, { className: Utilities_1.css('ms-Layer-content', styles.content) }, this.props.children), this._layerElement, function () {
if (!_this._hasMounted) {
_this._hasMounted = true;
// TODO: @deprecated cleanup required.
if (_this.props.onLayerMounted) {
_this.props.onLayerMounted();
}
_this.props.onLayerDidMount();
}
});
}
var _a;
};
Layer.prototype.render = function () {
return (React.createElement("span", { className: 'ms-Layer', ref: this._resolveRef('_rootElement') }));
};
Layer.prototype._removeLayerElement = function () {
if (this._layerElement) {
this.props.onLayerWillUnmount();
ReactDOM.unmountComponentAtNode(this._layerElement);
var parentNode = this._layerElement.parentNode;
if (parentNode) {
parentNode.removeChild(this._layerElement);
}
this._layerElement = undefined;
this._hasMounted = false;
}
};
Layer.prototype._getHost = function () {
var hostId = this.props.hostId;
var doc = Utilities_1.getDocument(this._rootElement);
if (hostId) {
return doc.getElementById(hostId);
}
else {
return doc.body;
}
};
return Layer;
}(Utilities_1.BaseComponent));
Layer.defaultProps = {
onLayerDidMount: function () { return undefined; },
onLayerWillUnmount: function () { return undefined; }
};
exports.Layer = Layer;
});
//# sourceMappingURL=Layer.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { rootIsFixed: 'rootIsFixed_82167c81', content: 'content_82167c81', }; load_themed_styles_1.loadStyles([{ "rawString": ".rootIsFixed_82167c81{position:fixed;z-index:1000000;top:0;left:0;width:100vw;height:100vh;visibility:hidden}.content_82167c81{visibility:visible}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Layer.scss.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=LayerHost.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./Layer"], function (require, exports, React, Utilities_1, Layer_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LayerHost = (function (_super) {
__extends(LayerHost, _super);
function LayerHost() {
return _super !== null && _super.apply(this, arguments) || this;
}
LayerHost.prototype.shouldComponentUpdate = function () {
return false;
};
LayerHost.prototype.componentDidMount = function () {
Layer_1.Layer.notifyHostChanged(this.props.id);
};
LayerHost.prototype.componentWillUnmount = function () {
Layer_1.Layer.notifyHostChanged(this.props.id);
};
LayerHost.prototype.render = function () {
return (React.createElement("div", __assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className) })));
};
return LayerHost;
}(Utilities_1.BaseComponent));
exports.LayerHost = LayerHost;
});
//# sourceMappingURL=LayerHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Layer.Basic.Example", "./examples/Layer.Hosted.Example"], function (require, exports, React, example_app_base_1, Layer_Basic_Example_1, Layer_Hosted_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LayerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx');
var LayerHostedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx');
var LayerPage = (function (_super) {
__extends(LayerPage, _super);
function LayerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
LayerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Layer', componentName: 'LayerExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic layered content', code: LayerBasicExampleCode },
React.createElement(Layer_Basic_Example_1.LayerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Using LayerHost to control projection', code: LayerHostedExampleCode },
React.createElement(Layer_Hosted_Example_1.LayerHostedExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Layer/Layer.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Layer is a technical component that does not have specific Design guidance."),
React.createElement("p", null, "Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by \"overflow: hidden\" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else."),
React.createElement("p", null, "There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs ( ref={ (el) => { this._root = el; } ) rather than string refs ( ref='root' ). Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, 'Use functional refs ( ref={ (el) => { this._root = el; } ).'))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, 'Don\'t use string refs ( ref=\'root\' ).'))), isHeaderVisible: this.props.isHeaderVisible }));
};
return LayerPage;
}(React.Component));
exports.LayerPage = LayerPage;
});
//# sourceMappingURL=LayerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Layer", "./LayerHost"], function (require, exports, Layer_1, LayerHost_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Layer_1); __export(LayerHost_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Link.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Link.js | 17.39% | (8 / 46) | 20.83% | (10 / 48) | 7.69% | (1 / 13) | 20.51% | (8 / 39) | |
| Link.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| LinkPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Link.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./Link.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Link = (function (_super) {
__extends(Link, _super);
function Link() {
return _super !== null && _super.apply(this, arguments) || this;
}
Link.prototype.render = function () {
var _a = this.props, disabled = _a.disabled, children = _a.children, className = _a.className, href = _a.href;
return (href ? (React.createElement("a", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.anchorProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_b = {
'is-disabled': disabled
},
_b[styles.isDisabled] = disabled,
_b[styles.isEnabled] = !disabled,
_b)), onClick: this._onClick, ref: this._resolveRef('_link'), target: this.props.target }), children)) : (React.createElement("button", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.buttonProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_c = {
'is-disabled': disabled
},
_c[styles.isDisabled] = disabled,
_c)), onClick: this._onClick, ref: this._resolveRef('_link') }), children)));
var _b, _c;
};
Link.prototype.focus = function () {
if (this._link) {
this._link.focus();
}
};
Link.prototype._onClick = function (ev) {
var onClick = this.props.onClick;
if (onClick) {
onClick(ev);
}
};
return Link;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], Link.prototype, "_onClick", null);
exports.Link = Link;
});
//# sourceMappingURL=Link.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_6388e252', isEnabled: 'isEnabled_6388e252', isDisabled: 'isDisabled_6388e252', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_6388e252{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin:0;overflow:inherit;padding:0;text-overflow:inherit}.isEnabled_6388e252:focus,.isEnabled_6388e252:hover{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.isEnabled_6388e252:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isDisabled_6388e252{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";pointer-events:none;cursor:default}button.root_6388e252{background:0 0;border:none;cursor:pointer;display:inline;font-size:inherit}button.root_6388e252::-moz-focus-inner{border:0}button.root_6388e252{outline:transparent;position:relative}.ms-Fabric.is-focusVisible button.root_6388e252:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] button.root_6388e252{text-align:left}html[dir=rtl] button.root_6388e252{text-align:right}a.root_6388e252{text-decoration:none}.ms-Fabric.is-focusVisible a.root_6388e252:focus{outline:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Link.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Link.Basic.Example"], function (require, exports, React, example_app_base_1, Link_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx');
var LinkPage = (function (_super) {
__extends(LinkPage, _super);
function LinkPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
LinkPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Link', componentName: 'LinkExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Link', code: LinkBasicExampleCode },
React.createElement(Link_Basic_Example_1.LinkBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Link/Link.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter."),
React.createElement("p", null, "A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option."),
React.createElement("li", null, "Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links."),
React.createElement("li", null, "Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip."),
React.createElement("li", null, "Use text that suggests clicking, such as a command starting with an imperative verb like \"Show\", \"Print\", \"Copy\", or \"Delete\"."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Link/Link.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return LinkPage;
}(React.Component));
exports.LinkPage = LinkPage;
});
//# sourceMappingURL=LinkPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Link"], function (require, exports, Link_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Link_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| List.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| List.js | 3.11% | (10 / 322) | 3.35% | (7 / 209) | 2.44% | (1 / 41) | 3.16% | (10 / 316) | |
| ListPage.js | 21.43% | (6 / 28) | 26.67% | (4 / 15) | 11.11% | (1 / 9) | 24% | (6 / 25) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=List.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 | 2 2 2 1 2 2 1 1 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RESIZE_DELAY = 16;
var MIN_SCROLL_UPDATE_DELAY = 100;
var MAX_SCROLL_UPDATE_DELAY = 500;
var IDLE_DEBOUNCE_DELAY = 200;
var DEFAULT_ITEMS_PER_PAGE = 10;
var DEFAULT_PAGE_HEIGHT = 30;
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
var EMPTY_RECT = {
top: -1,
bottom: -1,
left: -1,
right: -1,
width: 0,
height: 0
};
// Naming expensive measures so that they're named in profiles.
var _measurePageRect = function (element) { return element.getBoundingClientRect(); };
var _measureSurfaceRect = _measurePageRect;
var _measureScrollRect = _measurePageRect;
/**
* The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if
* provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by
* the caller, or by cached measurements if available, or by a running average, or a default fallback.
*
* The algorithm for rendering pages works like this:
*
* 1. Predict visible pages based on "current measure data" (page heights, surface position, visible window)
* 2. If changes are necessary, apply changes (add/remove pages)
* 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect
* 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously
*
* Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that
* we can avoid re-measuring during operations that should not alter heights, like scrolling.
*
* However, certain operations can make measure data stale. For example, resizing the list, or passing in new props,
* or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion
* number, which we associate with cached measurements and use to determine if a remeasure should occur.
*/
var List = (function (_super) {
__extends(List, _super);
function List(props) {
var _this = _super.call(this, props) || this;
_this.state = {
pages: []
};
_this._estimatedPageHeight = 0;
_this._totalEstimates = 0;
_this._requiredWindowsAhead = 0;
_this._requiredWindowsBehind = 0;
// Track the measure version for everything.
_this._measureVersion = 0;
// Ensure that scrolls are lazy updated.
_this._onAsyncScroll = _this._async.debounce(_this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {
leading: false,
maxWait: MAX_SCROLL_UPDATE_DELAY
});
_this._onAsyncIdle = _this._async.debounce(_this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {
leading: false
});
_this._onAsyncResize = _this._async.debounce(_this._onAsyncResize, RESIZE_DELAY, {
leading: false
});
_this._cachedPageHeights = {};
_this._estimatedPageHeight = 0;
_this._focusedIndex = -1;
_this._scrollingToIndex = -1;
return _this;
}
/**
* Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback
* to measure the height of an individual item is specified, will only scroll to bring the specific item into view.
*
* Note: with items of variable height and no passed in `getPageHeight` method, the list might jump after scrolling
* when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.
*
* @param index Index of item to scroll to
* @param measureItem Optional callback to measure the height of an individual item
*/
List.prototype.scrollToIndex = function (index, measureItem) {
var startIndex = this.props.startIndex;
var renderCount = this._getRenderCount();
var endIndex = startIndex + renderCount;
var scrollTop = 0;
var itemsPerPage = 1;
for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {
itemsPerPage = this._getItemCountForPage(itemIndex, this._allowedRect);
var requestedIndexIsInPage = itemIndex <= index && (itemIndex + itemsPerPage) > index;
if (requestedIndexIsInPage) {
// We have found the page. If the user provided a way to measure an individual item, we will try to scroll in just
// the given item, otherwise we'll only bring the page into view
if (measureItem) {
// Adjust for actual item position within page
var itemPositionWithinPage = index - itemIndex;
for (var itemIndexInPage = 0; itemIndexInPage < itemPositionWithinPage; ++itemIndexInPage) {
scrollTop += measureItem(itemIndex + itemIndexInPage);
}
var scrollBottom = scrollTop + measureItem(index);
var scrollRect = _measureScrollRect(this._scrollElement);
var scrollWindow = {
top: this._scrollElement.scrollTop,
bottom: this._scrollElement.scrollTop + scrollRect.height
};
var itemIsFullyVisible = scrollTop >= scrollWindow.top && scrollBottom <= scrollWindow.bottom;
if (itemIsFullyVisible) {
// Item is already visible, do nothing.
return;
}
var itemIsPartiallyAbove = scrollTop < scrollWindow.top;
var itemIsPartiallyBelow = scrollBottom > scrollWindow.bottom;
if (itemIsPartiallyAbove) {
// We will just scroll to 'scrollTop'
// ______
// |Item | - scrollTop
// | ____|_
// |_|____| | - scrollWindow.top
// | |
// |______|
}
else if (itemIsPartiallyBelow) {
// Adjust scrollTop position to just bring in the element
// ______ - scrollTop
// | |
// | ____|_ - scrollWindow.bottom
// |_|____| |
// | Item |
// |______| - scrollBottom
scrollTop = this._scrollElement.scrollTop + (scrollBottom - scrollWindow.bottom);
}
}
this._scrollElement.scrollTop = scrollTop;
break;
}
scrollTop += this._getPageHeight(itemIndex, itemsPerPage, this._surfaceRect);
}
};
List.prototype.componentDidMount = function () {
this._updatePages();
this._measureVersion++;
this._scrollElement = Utilities_1.findScrollableParent(this.refs.root);
this._events.on(window, 'resize', this._onAsyncResize);
this._events.on(this.refs.root, 'focus', this._onFocus, true);
if (this._scrollElement) {
this._events.on(this._scrollElement, 'scroll', this._onScroll);
this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);
}
};
List.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.items !== this.props.items ||
newProps.renderCount !== this.props.renderCount ||
newProps.startIndex !== this.props.startIndex) {
this._measureVersion++;
this._updatePages(newProps);
}
};
List.prototype.shouldComponentUpdate = function (newProps, newState) {
var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
var oldPages = this.state.pages;
var newPages = newState.pages, measureVersion = newState.measureVersion;
var shouldComponentUpdate = false;
if (this._measureVersion === measureVersion &&
newProps.renderedWindowsAhead === renderedWindowsAhead,
newProps.renderedWindowsBehind === renderedWindowsBehind,
newProps.items === this.props.items &&
oldPages.length === newPages.length) {
for (var i = 0; i < oldPages.length; i++) {
var oldPage = oldPages[i];
var newPage = newPages[i];
if ((oldPage.key !== newPage.key ||
oldPage.itemCount !== newPage.itemCount)) {
shouldComponentUpdate = true;
break;
}
}
}
else {
shouldComponentUpdate = true;
}
return shouldComponentUpdate;
};
List.prototype.forceUpdate = function () {
// Ensure that when the list is force updated we update the pages first before render.
this._updateRenderRects(this.props, true);
this._updatePages();
this._measureVersion++;
_super.prototype.forceUpdate.call(this);
};
List.prototype.render = function () {
var _a = this.props, className = _a.className, role = _a.role;
var pages = this.state.pages;
var pageElements = [];
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
// assign list if no role
role = (role === undefined) ? 'list' : role;
for (var i = 0; i < pages.length; i++) {
pageElements.push(this._renderPage(pages[i]));
}
return (React.createElement("div", __assign({ ref: 'root' }, divProps, { role: role, className: Utilities_1.css('ms-List', className) }),
React.createElement("div", { ref: 'surface', className: 'ms-List-surface' }, pageElements)));
};
List.prototype._renderPage = function (page) {
var _a = this.props, onRenderCell = _a.onRenderCell, role = _a.role;
var cells = [];
var pageStyle = this._getPageStyle(page);
// only assign list item role if no role is assigned
role = (role === undefined) ? 'listitem' : null;
for (var i = 0; page.items && i < page.items.length; i++) {
var item = page.items[i];
var index = page.startIndex + i;
var itemKey = this.props.getKey
? this.props.getKey(item, index)
: item && item.key;
if (itemKey === null || itemKey === undefined) {
itemKey = index;
}
cells.push(React.createElement("div", { role: role, className: 'ms-List-cell', key: itemKey, "data-list-index": i + page.startIndex, "data-automationid": 'ListCell' }, onRenderCell(item, page.startIndex + i)));
}
return (React.createElement("div", { className: 'ms-List-page', key: page.key, ref: page.key, style: pageStyle }, cells));
};
/** Generate the style object for the page. */
List.prototype._getPageStyle = function (page) {
var style;
var getPageStyle = this.props.getPageStyle;
if (getPageStyle) {
style = getPageStyle(page);
}
if (!page.items) {
style = style || {};
style.height = page.height;
}
return style;
};
/** Track the last item index focused so that we ensure we keep it rendered. */
List.prototype._onFocus = function (ev) {
var target = ev.target;
while (target !== this.refs.surface) {
var indexString = target.getAttribute('data-list-index');
if (indexString) {
this._focusedIndex = Number(indexString);
break;
}
target = Utilities_1.getParent(target);
}
};
/**
* Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed,
* we will call onAsyncIdle which will reset it back to it's correct value.
*/
List.prototype._onScroll = function () {
this._requiredWindowsAhead = 0;
this._requiredWindowsBehind = 0;
};
/**
* Debounced method to asynchronously update the visible region on a scroll event.
*/
List.prototype._onAsyncScroll = function () {
this._updateRenderRects();
// Only update pages when the visible rect falls outside of the materialized rect.
if (!this._materializedRect || !_isContainedWithin(this._requiredRect, this._materializedRect)) {
this._updatePages();
}
else {
// console.log('requiredRect contained in materialized', this._requiredRect, this._materializedRect);
}
};
/**
* This is an async debounced method that will try and increment the windows we render. If we can increment
* either, we increase the amount we render and re-evaluate.
*/
List.prototype._onAsyncIdle = function () {
var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
var _b = this, requiredWindowsAhead = _b._requiredWindowsAhead, requiredWindowsBehind = _b._requiredWindowsBehind;
var windowsAhead = Math.min(renderedWindowsAhead, requiredWindowsAhead + 1);
var windowsBehind = Math.min(renderedWindowsBehind, requiredWindowsBehind + 1);
if (windowsAhead !== requiredWindowsAhead || windowsBehind !== requiredWindowsBehind) {
// console.log('idling', windowsBehind, windowsAhead);
this._requiredWindowsAhead = windowsAhead;
this._requiredWindowsBehind = windowsBehind;
this._updateRenderRects();
this._updatePages();
}
if (renderedWindowsAhead > windowsAhead || renderedWindowsBehind > windowsBehind) {
// Async increment on next tick.
this._onAsyncIdle();
}
};
List.prototype._onAsyncResize = function () {
this.forceUpdate();
};
List.prototype._updatePages = function (props) {
var _this = this;
var _a = (props || this.props), items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;
renderCount = this._getRenderCount(props);
// console.log('updating pages');
if (!this._requiredRect) {
this._updateRenderRects(props);
}
var newListState = this._buildPages(items, startIndex, renderCount);
var oldListPages = this.state.pages;
this.setState(newListState, function () {
// If measured version is invalid since we've updated the DOM
var heightsChanged = _this._updatePageMeasurements(oldListPages, newListState.pages);
// On first render, we should re-measure so that we don't get a visual glitch.
if (heightsChanged) {
_this._materializedRect = null;
if (!_this._hasCompletedFirstRender) {
_this._hasCompletedFirstRender = true;
_this._updatePages();
}
else {
_this._onAsyncScroll();
}
}
else {
// Enqueue an idle bump.
_this._onAsyncIdle();
}
});
};
List.prototype._updatePageMeasurements = function (oldPages, newPages) {
var renderedIndexes = {};
var heightChanged = false;
var renderCount = this._getRenderCount();
for (var i = 0; i < oldPages.length; i++) {
var page = oldPages[i];
if (page.items) {
renderedIndexes[page.startIndex] = page;
}
}
for (var i = 0; i < newPages.length; i++) {
var page = newPages[i];
if (page.items) {
// Only evaluate page height if the page contains less items than total.
if (page.items.length < renderCount) {
heightChanged = this._measurePage(page) || heightChanged;
}
if (!renderedIndexes[page.startIndex]) {
this._onPageAdded(page);
}
else {
delete renderedIndexes[page.startIndex];
}
}
}
for (var index in renderedIndexes) {
if (renderedIndexes.hasOwnProperty(index)) {
this._onPageRemoved(renderedIndexes[index]);
}
}
return heightChanged;
};
/**
* Given a page, measure its dimensions, update cache.
* @returns True if the height has changed.
*/
List.prototype._measurePage = function (page) {
var hasChangedHeight = false;
var pageElement = this.refs[page.key];
var cachedHeight = this._cachedPageHeights[page.startIndex];
// console.log(' * measure attempt', page.startIndex, cachedHeight);
if (pageElement && (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) {
var newClientRect = _measurePageRect(pageElement);
hasChangedHeight = page.height !== newClientRect.height;
// console.warn(' *** expensive page measure', page.startIndex, page.height, newClientRect.height);
page.height = newClientRect.height;
this._cachedPageHeights[page.startIndex] = {
height: newClientRect.height,
measureVersion: this._measureVersion
};
this._estimatedPageHeight = Math.round(((this._estimatedPageHeight * this._totalEstimates) + newClientRect.height) /
(this._totalEstimates + 1));
this._totalEstimates++;
}
return hasChangedHeight;
};
/** Called when a page has been added to the DOM. */
List.prototype._onPageAdded = function (page) {
var onPageAdded = this.props.onPageAdded;
// console.log('page added', page.startIndex, this.state.pages.map(page=>page.key).join(', '));
if (onPageAdded) {
onPageAdded(page);
}
};
/** Called when a page has been removed from the DOM. */
List.prototype._onPageRemoved = function (page) {
var onPageRemoved = this.props.onPageRemoved;
// console.log(' --- page removed', page.startIndex, this.state.pages.map(page=>page.key).join(', '));
if (onPageRemoved) {
onPageRemoved(page);
}
};
/** Build up the pages that should be rendered. */
List.prototype._buildPages = function (items, startIndex, renderCount) {
var materializedRect = Utilities_1.assign({}, EMPTY_RECT);
var itemsPerPage = 1;
var pages = [];
var pageTop = 0;
var currentSpacer = null;
var focusedIndex = this._focusedIndex;
var endIndex = startIndex + renderCount;
// First render is very important to track; when we render cells, we have no idea of estimated page height.
// So we should default to rendering only the first page so that we can get information.
// However if the user provides a measure function, let's just assume they know the right heights.
var isFirstRender = this._estimatedPageHeight === 0 && !this.props.getPageHeight;
var _loop_1 = function (itemIndex) {
itemsPerPage = this_1._getItemCountForPage(itemIndex, this_1._allowedRect);
var pageHeight = this_1._getPageHeight(itemIndex, itemsPerPage, this_1._surfaceRect);
var pageBottom = pageTop + pageHeight - 1;
var isPageRendered = Utilities_1.findIndex(this_1.state.pages, function (page) { return page.items && page.startIndex === itemIndex; }) > -1;
var isPageInAllowedRange = pageBottom >= this_1._allowedRect.top && pageTop <= this_1._allowedRect.bottom;
var isPageInRequiredRange = pageBottom >= this_1._requiredRect.top && pageTop <= this_1._requiredRect.bottom;
var isPageVisible = !isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered));
var isPageFocused = focusedIndex >= itemIndex && focusedIndex < (itemIndex + itemsPerPage);
var isFirstPage = itemIndex === startIndex;
// console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' + isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange);
// Only render whats visible, focused, or first page.
if (isPageVisible || isPageFocused || isFirstPage) {
if (currentSpacer) {
pages.push(currentSpacer);
currentSpacer = null;
}
var itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);
var newPage = this_1._createPage(null, items.slice(itemIndex, itemIndex + itemsInPage), itemIndex);
newPage.top = pageTop;
newPage.height = pageHeight;
pages.push(newPage);
if (isPageInRequiredRange) {
_mergeRect(materializedRect, {
top: pageTop,
bottom: pageBottom,
height: pageHeight,
left: this_1._allowedRect.left,
right: this_1._allowedRect.right,
width: this_1._allowedRect.width
});
}
}
else {
if (!currentSpacer) {
currentSpacer = this_1._createPage('spacer-' + itemIndex, null, itemIndex, 0);
}
currentSpacer.height = (currentSpacer.height || 0) + (pageBottom - pageTop) + 1;
currentSpacer.itemCount += itemsPerPage;
}
pageTop += (pageBottom - pageTop + 1);
if (isFirstRender) {
return "break";
}
};
var this_1 = this;
for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {
var state_1 = _loop_1(itemIndex);
if (state_1 === "break")
break;
}
if (currentSpacer) {
currentSpacer.key = 'spacer-end';
pages.push(currentSpacer);
}
this._materializedRect = materializedRect;
// console.log('materialized: ', materializedRect);
return {
pages: pages,
measureVersion: this._measureVersion
};
};
/**
* Get the pixel height of a give page. Will use the props getPageHeight first, and if not provided, fallback to
* cached height, or estimated page height, or default page height.
*/
List.prototype._getPageHeight = function (itemIndex, itemsPerPage, visibleRect) {
if (this.props.getPageHeight) {
return this.props.getPageHeight(itemIndex, visibleRect);
}
else {
var cachedHeight = (this._cachedPageHeights[itemIndex]);
return cachedHeight ? cachedHeight.height : (this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT);
}
};
List.prototype._getItemCountForPage = function (itemIndex, visibileRect) {
var itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE;
return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE;
};
List.prototype._createPage = function (pageKey, items, startIndex, count, style) {
pageKey = pageKey || ('page-' + startIndex);
// Fill undefined cells because array.map will ignore undefined cells.
if (items) {
for (var i = 0; i < items.length; i++) {
items[i] = items[i] || null;
}
}
return {
key: pageKey,
startIndex: startIndex === undefined ? -1 : startIndex,
itemCount: (count === undefined) ? (items ? items.length : 0) : count,
items: items,
style: style || {},
top: 0,
height: 0
};
};
List.prototype._getRenderCount = function (props) {
var _a = props || this.props, items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;
return (renderCount === undefined ? (items ? items.length - startIndex : 0) : renderCount);
};
/** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */
List.prototype._updateRenderRects = function (props, forceUpdate) {
var _a = (props || this.props), renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
var pages = this.state.pages;
var renderCount = this._getRenderCount(props);
var surfaceRect = this._surfaceRect;
// WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window.
if (forceUpdate ||
!pages ||
!this._surfaceRect ||
(pages.length > 0 && pages[0].items && pages[0].items.length < renderCount)) {
surfaceRect = this._surfaceRect = _measureSurfaceRect(this.refs.surface);
}
// If the surface is above the container top or below the container bottom, or if this is not the first
// render return empty rect.
// The first time the list gets rendered we need to calculate the rectangle. The width of the list is
// used to calculate the width of the list items.
var visibleTop = Math.max(0, -surfaceRect.top);
var visibleRect = {
top: visibleTop,
left: surfaceRect.left,
bottom: visibleTop + window.innerHeight,
right: surfaceRect.right,
width: surfaceRect.width,
height: window.innerHeight
};
// The required/allowed rects are adjusted versions of the visible rect.
this._requiredRect = _expandRect(visibleRect, this._requiredWindowsBehind, this._requiredWindowsAhead);
this._allowedRect = _expandRect(visibleRect, renderedWindowsBehind, renderedWindowsAhead);
};
return List;
}(Utilities_1.BaseComponent));
List.defaultProps = {
startIndex: 0,
onRenderCell: function (item, index, containsFocus) { return (React.createElement("div", null, (item && item.name) || '')); },
renderedWindowsAhead: DEFAULT_RENDERED_WINDOWS_AHEAD,
renderedWindowsBehind: DEFAULT_RENDERED_WINDOWS_BEHIND
};
exports.List = List;
function _expandRect(rect, pagesBefore, pagesAfter) {
var top = rect.top - (pagesBefore * rect.height);
var height = rect.height + ((pagesBefore + pagesAfter) * rect.height);
return {
top: top,
bottom: top + height,
height: height,
left: rect.left,
right: rect.right,
width: rect.width
};
}
function _isContainedWithin(innerRect, outerRect) {
return (innerRect.top >= outerRect.top &&
innerRect.left >= outerRect.left &&
innerRect.bottom <= outerRect.bottom &&
innerRect.right <= outerRect.right);
}
function _mergeRect(targetRect, newRect) {
targetRect.top = (newRect.top < targetRect.top || targetRect.top === -1) ? newRect.top : targetRect.top;
targetRect.left = (newRect.left < targetRect.left || targetRect.left === -1) ? newRect.left : targetRect.left;
targetRect.bottom = (newRect.bottom > targetRect.bottom || targetRect.bottom === -1) ? newRect.bottom : targetRect.bottom;
targetRect.right = (newRect.right > targetRect.right || targetRect.right === -1) ? newRect.right : targetRect.right;
targetRect.width = targetRect.right - targetRect.left + 1;
targetRect.height = targetRect.bottom - targetRect.top + 1;
return targetRect;
}
});
//# sourceMappingURL=List.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/List.Basic.Example", "./examples/List.Mail.Example", "./examples/List.Grid.Example", "./examples/List.Scrolling.Example", "@uifabric/example-app-base"], function (require, exports, React, example_app_base_1, List_Basic_Example_1, List_Mail_Example_1, List_Grid_Example_1, List_Scrolling_Example_1, example_app_base_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx');
var ListMailExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Mail.Example.tsx');
var ListGridExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx');
var ListScrollingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx');
var _cachedItems;
var ListPage = (function (_super) {
__extends(ListPage, _super);
function ListPage() {
var _this = _super.call(this) || this;
_cachedItems = _cachedItems || example_app_base_2.createListItems(5000);
return _this;
}
ListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'List', componentName: 'ListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'List of 5000 grid items', isOptIn: true, code: ListGridExampleCode },
React.createElement(List_Grid_Example_1.ListGridExample, { items: _cachedItems })),
React.createElement(example_app_base_1.ExampleCard, { title: 'List of 5000 variable height items', isOptIn: true, code: ListBasicExampleCode },
React.createElement(List_Basic_Example_1.ListBasicExample, { items: _cachedItems })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Fixed list of 5000 email tiles', isOptIn: true, code: ListMailExampleCode },
React.createElement(List_Mail_Example_1.ListMailExample, { items: _cachedItems })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Scrolling items into view', isOptIn: true, code: ListScrollingExampleCode },
React.createElement(List_Scrolling_Example_1.ListScrollingExample, { items: _cachedItems }))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/List/List.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null,
React.createElement("span", null, "List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately.")),
React.createElement("p", null,
React.createElement("b", null, "Performance is important, and DOM content is expensive. Therefore limit what you render."),
" Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive."),
React.createElement("p", null, "Lists break down the set of items passed in into pages. Only pages within a \"materialized window\" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/List/List.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ListPage;
}(React.Component));
exports.ListPage = ListPage;
});
//# sourceMappingURL=ListPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./List"], function (require, exports, List_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(List_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| MarqueeSelection.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| MarqueeSelection.js | 5.52% | (8 / 145) | 8.4% | (10 / 119) | 4.76% | (1 / 21) | 5.8% | (8 / 138) | |
| MarqueeSelection.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| MarqueeSelectionPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=MarqueeSelection.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./MarqueeSelection.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start
// the drag even if they just click an item without moving.
var MIN_DRAG_DISTANCE = 5;
/**
* MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.
* Elements which have data-selectable-index attributes are queried and measured once to determine if they
* fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization
* so if the items change sizes while dragging, that could cause incorrect results.
*/
var MarqueeSelection = (function (_super) {
__extends(MarqueeSelection, _super);
function MarqueeSelection(props) {
var _this = _super.call(this, props) || this;
_this.state = {
dragRect: undefined
};
return _this;
}
MarqueeSelection.prototype.componentDidMount = function () {
this._scrollableParent = Utilities_1.findScrollableParent(this.refs.root);
this._scrollableSurface = this._scrollableParent === window ? document.body : this._scrollableParent;
// When scroll events come from window, we need to read scrollTop values from the body.
this._events.on(this.props.isDraggingConstrainedToRoot ? this.refs.root : this._scrollableSurface, 'mousedown', this._onMouseDown);
};
MarqueeSelection.prototype.componentWillUnmount = function () {
if (this._autoScroll) {
this._autoScroll.dispose();
}
};
MarqueeSelection.prototype.render = function () {
var _a = this.props, rootProps = _a.rootProps, children = _a.children;
var dragRect = this.state.dragRect;
return (React.createElement("div", __assign({}, rootProps, { className: Utilities_1.css('ms-MarqueeSelection', styles.root, rootProps.className), ref: 'root' }),
children,
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-dragMask', styles.dragMask) })),
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-box', styles.box), style: dragRect },
React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-boxFill', styles.boxFill) })))));
};
/** Determine if the mouse event occured on a scrollbar of the target element. */
MarqueeSelection.prototype._isMouseEventOnScrollbar = function (ev) {
var targetElement = ev.target;
var targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
if (targetScrollbarWidth) {
var targetRect = targetElement.getBoundingClientRect();
// Check vertical scroll
if (Utilities_1.getRTL()) {
if (ev.clientX < (targetRect.left + targetScrollbarWidth)) {
return true;
}
}
else {
if (ev.clientX > (targetRect.left + targetElement.clientWidth)) {
return true;
}
}
// Check horizontal scroll
if (ev.clientY > (targetRect.top + targetElement.clientHeight)) {
return true;
}
}
return false;
};
MarqueeSelection.prototype._onMouseDown = function (ev) {
var _a = this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection;
// Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
if (this._isMouseEventOnScrollbar(ev)) {
return;
}
if (isEnabled && !this._isDragStartInSelection(ev) && (!onShouldStartSelection || onShouldStartSelection(ev))) {
if (this._scrollableSurface && ev.button === 0) {
this._selectedIndicies = {};
this._events.on(window, 'mousemove', this._onMouseMove);
this._events.on(this._scrollableParent, 'scroll', this._onMouseMove);
this._events.on(window, 'click', this._onMouseUp, true);
this._autoScroll = new Utilities_1.AutoScroll(this.refs.root);
this._scrollTop = this._scrollableSurface.scrollTop;
this._rootRect = this.refs.root.getBoundingClientRect();
}
}
};
MarqueeSelection.prototype._getRootRect = function () {
return {
left: this._rootRect.left,
top: this._rootRect.top + (this._scrollTop - this._scrollableSurface.scrollTop),
width: this._rootRect.width,
height: this._rootRect.height
};
};
MarqueeSelection.prototype._onMouseMove = function (ev) {
if (ev.clientX !== undefined) {
this._lastMouseEvent = ev;
}
var rootRect = this._getRootRect();
var currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top };
if (!this._dragOrigin) {
this._dragOrigin = currentPoint;
}
if (ev.buttons !== undefined && ev.buttons === 0) {
this._onMouseUp(ev);
}
else {
if (this.state.dragRect || Utilities_1.getDistanceBetweenPoints(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) {
// We need to constrain the current point to the rootRect boundaries.
var constrainedPoint = this.props.isDraggingConstrainedToRoot ? {
x: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)),
y: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top))
} : {
x: this._lastMouseEvent.clientX - rootRect.left,
y: this._lastMouseEvent.clientY - rootRect.top
};
var dragRect = {
left: Math.min(this._dragOrigin.x, constrainedPoint.x),
top: Math.min(this._dragOrigin.y, constrainedPoint.y),
width: Math.abs(constrainedPoint.x - this._dragOrigin.x),
height: Math.abs(constrainedPoint.y - this._dragOrigin.y)
};
this.setState({ dragRect: dragRect });
this._evaluateSelection(dragRect);
}
}
ev.stopPropagation();
ev.preventDefault();
return false;
};
MarqueeSelection.prototype._onMouseUp = function (ev) {
this._events.off(window);
this._events.off(this._scrollableParent, 'scroll');
this._autoScroll.dispose();
this._autoScroll = this._dragOrigin = this._lastMouseEvent = this._selectedIndicies = this._itemRectCache = undefined;
if (this.state.dragRect) {
this.setState({
dragRect: undefined
});
ev.preventDefault();
ev.stopPropagation();
}
};
MarqueeSelection.prototype._isPointInRectangle = function (rectangle, point) {
return rectangle.top < point.y &&
rectangle.bottom > point.y &&
rectangle.left < point.x &&
rectangle.right > point.x;
};
/**
* We do not want to start the marquee if we're trying to marquee
* from within an existing marquee selection.
*/
MarqueeSelection.prototype._isDragStartInSelection = function (ev) {
var selection = this.props.selection;
if (selection && selection.getSelectedCount() === 0) {
return false;
}
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
for (var i = 0; i < allElements.length; i++) {
var element = allElements[i];
var index = Number(element.getAttribute('data-selection-index'));
if (selection.isIndexSelected(index)) {
var itemRect = element.getBoundingClientRect();
if (this._isPointInRectangle(itemRect, { x: ev.x, y: ev.y })) {
return true;
}
}
}
return false;
};
MarqueeSelection.prototype._evaluateSelection = function (dragRect) {
// Break early if we don't need to evaluate.
if (!dragRect) {
return;
}
var selection = this.props.selection;
var rootRect = this._getRootRect();
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
if (!this._itemRectCache) {
this._itemRectCache = {};
}
// Stop change events, clear selection to re-populate.
selection.setChangeEvents(false);
selection.setAllSelected(false);
for (var i = 0; i < allElements.length; i++) {
var element = allElements[i];
var index = element.getAttribute('data-selection-index');
// Pull the memoized rectangle for the item, or the get the rect and memoize.
var itemRect = this._itemRectCache[index];
if (!itemRect) {
itemRect = element.getBoundingClientRect();
// Normalize the item rect to the dragRect coordinates.
itemRect = {
left: itemRect.left - rootRect.left,
top: itemRect.top - rootRect.top,
width: itemRect.width,
height: itemRect.height,
right: (itemRect.left - rootRect.left) + itemRect.width,
bottom: (itemRect.top - rootRect.top) + itemRect.height
};
if (itemRect.width > 0 && itemRect.height > 0) {
this._itemRectCache[index] = itemRect;
}
}
if (itemRect.top < (dragRect.top + dragRect.height) &&
itemRect.bottom > dragRect.top &&
itemRect.left < (dragRect.left + dragRect.width) &&
itemRect.right > dragRect.left) {
this._selectedIndicies[index] = true;
}
else {
delete this._selectedIndicies[index];
}
}
for (var index in this._selectedIndicies) {
if (this._selectedIndicies.hasOwnProperty(index)) {
selection.setIndexSelected(Number(index), true, false);
}
}
selection.setChangeEvents(true);
};
return MarqueeSelection;
}(Utilities_1.BaseComponent));
MarqueeSelection.defaultProps = {
rootTagName: 'div',
rootProps: {},
isEnabled: true
};
__decorate([
Utilities_1.autobind
], MarqueeSelection.prototype, "_onMouseDown", null);
exports.MarqueeSelection = MarqueeSelection;
});
//# sourceMappingURL=MarqueeSelection.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_be5479a3', dragMask: 'dragMask_be5479a3', box: 'box_be5479a3', boxFill: 'boxFill_be5479a3', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_be5479a3{position:relative;cursor:default}.dragMask_be5479a3{position:absolute;background:rgba(255,0,0,0);left:0;top:0;right:0;bottom:0}.box_be5479a3{position:absolute;box-sizing:border-box;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";pointer-events:none}.boxFill_be5479a3{position:absolute;box-sizing:border-box;background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";opacity:.1;left:0;top:0;right:0;bottom:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=MarqueeSelection.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/MarqueeSelection.Basic.Example"], function (require, exports, React, example_app_base_1, MarqueeSelection_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MarqueeSelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx');
var MarqueeSelectionPage = (function (_super) {
__extends(MarqueeSelectionPage, _super);
function MarqueeSelectionPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
MarqueeSelectionPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'MarqueeSelection', componentName: 'MarqueeSelectionExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Basic Selection Example', code: MarqueeSelectionBasicExampleCode },
React.createElement(MarqueeSelection_Basic_Example_1.MarqueeSelectionBasicExample, null)), overview: React.createElement("div", null,
React.createElement("p", null, "The MarqueeSelection component provides a service which allows the user to drag a rectangle to be drawn around items to select them. This works in conjunction with a selection object, which can be used to generically store selection state, separate from a component that consumes the state."),
React.createElement("p", null, "MarqueeSelection also works in conjunction with the AutoScroll utility to automatically scroll the container when we drag a rectangle within the vicinity of the edges."),
React.createElement("p", null,
"When a selection rectangle is dragged, we look for elements with the ",
React.createElement("b", null, "data-selection-index"),
" attribute populated. We get these elements' boundingClientRects and compare them with the root's rect to determine selection state. We update the selection state appropriately."),
React.createElement("p", null, "In virtualization cases where items that were once selected are dematerialized, we will keep the item in its previous state until we know definitively if it's on/off. (In other words, this works with List.)")), isHeaderVisible: this.props.isHeaderVisible }));
};
return MarqueeSelectionPage;
}(React.Component));
exports.MarqueeSelectionPage = MarqueeSelectionPage;
});
//# sourceMappingURL=MarqueeSelectionPage.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| MessageBar.Props.js | 9.09% | (1 / 11) | 0% | (0 / 2) | 0% | (0 / 2) | 9.09% | (1 / 11) | |
| MessageBar.js | 11.54% | (6 / 52) | 13.33% | (4 / 30) | 5.56% | (1 / 18) | 12.24% | (6 / 49) | |
| MessageBar.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| MessageBarPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var MessageBarType; (function (MessageBarType) { /** Info styled MessageBar */ MessageBarType[MessageBarType["info"] = 0] = "info"; /** Error styled MessageBar */ MessageBarType[MessageBarType["error"] = 1] = "error"; /** Blocked styled MessageBar */ MessageBarType[MessageBarType["blocked"] = 2] = "blocked"; /** SevereWarning styled MessageBar */ MessageBarType[MessageBarType["severeWarning"] = 3] = "severeWarning"; /** Success styled MessageBar */ MessageBarType[MessageBarType["success"] = 4] = "success"; /** Warning styled MessageBar */ MessageBarType[MessageBarType["warning"] = 5] = "warning"; /** * Deprecated at v0.48.0, to be removed at >= v1.0.0. Use 'blocked' instead. * @deprecated */ MessageBarType[MessageBarType["remove"] = 90000] = "remove"; })(MessageBarType = exports.MessageBarType || (exports.MessageBarType = {})); }); //# sourceMappingURL=MessageBar.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "../../Button", "./MessageBar.Props", "./MessageBar.scss"], function (require, exports, React, Utilities_1, Button_1, MessageBar_Props_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MessageBar = (function (_super) {
__extends(MessageBar, _super);
function MessageBar(props) {
var _this = _super.call(this, props) || this;
_this.ICON_MAP = (_a = {},
_a[MessageBar_Props_1.MessageBarType.info] = 'Info',
_a[MessageBar_Props_1.MessageBarType.warning] = 'Info',
_a[MessageBar_Props_1.MessageBarType.error] = 'ErrorBadge',
_a[MessageBar_Props_1.MessageBarType.blocked] = 'Blocked',
_a[MessageBar_Props_1.MessageBarType.remove] = 'Blocked',
_a[MessageBar_Props_1.MessageBarType.severeWarning] = 'Warning',
_a[MessageBar_Props_1.MessageBarType.success] = 'Completed',
_a);
_this.state = {
labelId: Utilities_1.getId('MessageBar'),
showContent: false
};
return _this;
var _a;
}
MessageBar.prototype.render = function () {
var isMultiline = this.props.isMultiline;
return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
};
MessageBar.prototype._getActionsDiv = function () {
if (this.props.actions) {
return React.createElement("div", { className: this.props.isMultiline ?
('ms-MessageBar-actions ' + styles.actions) :
('ms-MessageBar-actionsOneline ' + styles.actionsOneline) }, this.props.actions);
}
return null;
};
MessageBar.prototype._getClassName = function () {
return Utilities_1.css(this.props.className, 'ms-MessageBar', styles.root, (_a = {},
_a['ms-MessageBar ' + styles.root] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.info,
_a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.error,
_a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) ||
(this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove),
_a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning,
_a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.success,
_a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning,
_a));
var _a;
};
MessageBar.prototype._getDismissDiv = function () {
if (this.props.onDismiss != null) {
return (React.createElement(Button_1.IconButton, { disabled: false, className: Utilities_1.css('ms-MessageBar-dismissal', styles.dismissal), onClick: this.props.onDismiss, iconProps: { iconName: 'Cancel' }, ariaLabel: this.props.dismissButtonAriaLabel }));
}
return null;
};
MessageBar.prototype._getIconSpan = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-icon', styles.icon) },
React.createElement("i", { className: "ms-Icon ms-Icon--" + this.ICON_MAP[this.props.messageBarType] })));
};
MessageBar.prototype._getInnerTextClassName = function () {
return this.props.onDismiss || this.props.actions ?
'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText;
};
MessageBar.prototype._renderMultiLine = function () {
return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-multiline ' + styles.multiline, role: 'status', "aria-live": this._getAnnouncementPriority() },
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) },
this._getIconSpan(),
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) },
this._renderInnerText(),
this._getActionsDiv(),
this._getDismissDiv()))));
};
MessageBar.prototype._renderSingleLine = function () {
return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-singleline ' + styles.singleline },
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) },
this._getIconSpan(),
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) }, this._renderInnerText()),
this._getActionsDiv(),
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissalOneline', styles.dismissalOneline) }, this._getDismissDiv()))));
};
MessageBar.prototype._renderInnerText = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', styles.text), id: this.state.labelId },
React.createElement("span", { className: this._getInnerTextClassName(), role: 'status', "aria-live": this._getAnnouncementPriority() },
React.createElement(Utilities_1.DelayedRender, null,
React.createElement("span", null, this.props.children)))));
};
MessageBar.prototype._getAnnouncementPriority = function () {
switch (this.props.messageBarType) {
case MessageBar_Props_1.MessageBarType.blocked:
case MessageBar_Props_1.MessageBarType.error:
case MessageBar_Props_1.MessageBarType.severeWarning:
return 'assertive';
}
return 'polite';
};
return MessageBar;
}(Utilities_1.BaseComponent));
MessageBar.defaultProps = {
messageBarType: MessageBar_Props_1.MessageBarType.info,
onDismiss: null,
isMultiline: true,
};
exports.MessageBar = MessageBar;
});
//# sourceMappingURL=MessageBar.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_79af0d36', icon: 'icon_79af0d36', text: 'text_79af0d36', rootIsWarning: 'rootIsWarning_79af0d36', rootIsSevereWarning: 'rootIsSevereWarning_79af0d36', rootIsError: 'rootIsError_79af0d36', rootIsBlocked: 'rootIsBlocked_79af0d36', rootIsSuccess: 'rootIsSuccess_79af0d36', content: 'content_79af0d36', actionables: 'actionables_79af0d36', dismissal: 'dismissal_79af0d36', actions: 'actions_79af0d36', actionsOneline: 'actionsOneline_79af0d36', dismissalOneline: 'dismissalOneline_79af0d36', innerTextPadding: 'innerTextPadding_79af0d36', innerText: 'innerText_79af0d36', multiline: 'multiline_79af0d36', singleline: 'singleline_79af0d36', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_79af0d36{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;background-color:" }, { "theme": "infoBackground", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "infoText", "defaultValue": "#333333" }, { "rawString": ";width:100%;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.root_79af0d36 .icon_79af0d36{color:" }, { "theme": "info", "defaultValue": "#767676" }, { "rawString": "}html[dir=ltr] .root_79af0d36 .icon_79af0d36{padding-right:8px}html[dir=rtl] .root_79af0d36 .icon_79af0d36{padding-left:8px}.root_79af0d36 .ms-Link{font-size:12px;color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}html[dir=ltr] .root_79af0d36 .ms-Button{margin-left:6px}html[dir=rtl] .root_79af0d36 .ms-Button{margin-right:6px}.icon_79af0d36,.text_79af0d36{display:table-cell;vertical-align:top}.icon_79af0d36{font-size:16px;min-width:16px;min-height:16px;display:-webkit-box;display:-ms-flexbox;display:flex}.text_79af0d36{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex}.root_79af0d36.rootIsWarning_79af0d36{background-color:" }, { "theme": "warningBackground", "defaultValue": "#fff4ce" }, { "rawString": ";color:" }, { "theme": "warningText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsSevereWarning_79af0d36{background-color:" }, { "theme": "severeWarningBackground", "defaultValue": "#fed9cc" }, { "rawString": ";color:" }, { "theme": "severeWarningText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsSevereWarning_79af0d36 .icon_79af0d36{color:" }, { "theme": "severeWarning", "defaultValue": "#d83b01" }, { "rawString": "}.root_79af0d36.rootIsError_79af0d36{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsError_79af0d36 .icon_79af0d36{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_79af0d36.rootIsBlocked_79af0d36{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsBlocked_79af0d36 .icon_79af0d36{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_79af0d36.rootIsSuccess_79af0d36{background-color:" }, { "theme": "successBackground", "defaultValue": "#dff6dd" }, { "rawString": ";color:" }, { "theme": "successText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsSuccess_79af0d36 .icon_79af0d36{color:" }, { "theme": "green", "defaultValue": "#107c10" }, { "rawString": "}.content_79af0d36{padding:16px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;box-sizing:border-box}.content_79af0d36:before{position:absolute;content:' ';right:0;bottom:0;left:0;top:0;margin:0}@media screen and (-ms-high-contrast:active){.content_79af0d36:before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.content_79af0d36:before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.actionables_79af0d36{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-width:0}.actionables_79af0d36>.dismissal_79af0d36{right:0;top:0;position:absolute!important}.actionsOneline_79af0d36,.actions_79af0d36{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.actionsOneline_79af0d36{position:relative}.dismissal_79af0d36{min-width:0}.dismissal_79af0d36::-moz-focus-inner{border:0}.dismissal_79af0d36{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .dismissal_79af0d36:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .dismissalOneline_79af0d36 .dismissal_79af0d36{margin-right:-8px}html[dir=rtl] .dismissalOneline_79af0d36 .dismissal_79af0d36{margin-left:-8px}.root_79af0d36+.root_79af0d36{margin-top:6px}html[dir=ltr] .innerTextPadding_79af0d36{padding-right:24px}html[dir=rtl] .innerTextPadding_79af0d36{padding-left:24px}html[dir=ltr] .innerTextPadding_79af0d36 .innerText_79af0d36>span,html[dir=ltr] .innerTextPadding_79af0d36 span{padding-right:4px}html[dir=rtl] .innerTextPadding_79af0d36 .innerText_79af0d36>span,html[dir=rtl] .innerTextPadding_79af0d36 span{padding-left:4px}.multiline_79af0d36>.content_79af0d36>.actionables_79af0d36{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.singleline_79af0d36 .content_79af0d36 .icon_79af0d36{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.singleline_79af0d36 .content_79af0d36 .actionables_79af0d36>.text_79af0d36{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.singleline_79af0d36 .content_79af0d36 .actionables_79af0d36>.text_79af0d36 .innerTextPadding_79af0d36,.singleline_79af0d36 .content_79af0d36 .actionables_79af0d36>.text_79af0d36 .innerText_79af0d36{max-height:1.3em;line-height:1.3em;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.singleline_79af0d36 .content_79af0d36>.actionables_79af0d36{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.root_79af0d36 .ms-Icon--Cancel{font-size:14px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=MessageBar.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/MessageBar.Basic.Example"], function (require, exports, React, example_app_base_1, MessageBar_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MessageBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx');
var MessageBarPage = (function (_super) {
__extends(MessageBarPage, _super);
function MessageBarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
MessageBarPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'MessageBar', componentName: 'MessageBarExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Various MessageBar types', code: MessageBarBasicExampleCode },
React.createElement(MessageBar_Basic_Example_1.MessageBarBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location."),
React.createElement("li", null, "Keep the text very brief. Be succinct and your users are more likely to read everything you say."),
React.createElement("li", null, "Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length."),
React.createElement("li", null, "Use the right variant for the type and urgency of the particular message (see variants)"))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user\u2019s main content too low on the view."),
React.createElement("li", null, "Don\u2019t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single \u201Dhero\u201D action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/MessageBar/MessageBar.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return MessageBarPage;
}(React.Component));
exports.MessageBarPage = MessageBarPage;
});
//# sourceMappingURL=MessageBarPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./MessageBar", "./MessageBar.Props"], function (require, exports, MessageBar_1, MessageBar_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(MessageBar_1); __export(MessageBar_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Modal.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Modal.js | 12.07% | (7 / 58) | 11.48% | (7 / 61) | 7.69% | (1 / 13) | 13.46% | (7 / 52) | |
| Modal.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| ModalPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Modal.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../FocusTrapZone/index", "../../Overlay", "../../Layer", "../Popup/index", "../../utilities/decorators/withResponsiveMode", "./Modal.scss"], function (require, exports, React, Utilities_1, index_1, Overlay_1, Layer_1, index_2, withResponsiveMode_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Modal = (function (_super) {
__extends(Modal, _super);
function Modal(props) {
var _this = _super.call(this, props) || this;
_this._onDialogRef = _this._onDialogRef.bind(_this);
_this.state = {
id: Utilities_1.getId('Modal'),
isOpen: props.isOpen,
isAnimatingOpen: props.isOpen,
isAnimatingClose: false
};
return _this;
}
Modal.prototype.componentWillReceiveProps = function (newProps) {
// Opening the dialog
if (newProps.isOpen && !this.state.isOpen) {
this.setState({
isOpen: true,
isAnimatingOpen: true,
isAnimatingClose: false
});
}
// Closing the dialog
if (!newProps.isOpen && this.state.isOpen) {
this.setState({
isAnimatingOpen: false,
isAnimatingClose: true
});
}
};
Modal.prototype.render = function () {
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId;
var _b = this.state, id = _b.id, isOpen = _b.isOpen, isAnimatingOpen = _b.isAnimatingOpen, isAnimatingClose = _b.isAnimatingClose;
// @TODO - the discussion on whether the Modal contain a property for rendering itself is still being discussed
if (!isOpen) {
return null;
}
var subTextContent;
var modalClassName = Utilities_1.css('ms-Dialog', styles.root, this.props.className, (_c = {},
_c['is-open ' + styles.isOpen] = isOpen,
_c['ms-u-fadeIn200'] = isAnimatingOpen,
_c['ms-u-fadeOut200'] = isAnimatingClose,
_c));
// @temp tuatology - Will adjust this to be a panel at certain breakpoints
if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
return (React.createElement(Layer_1.Layer, { onLayerDidMount: onLayerDidMount },
React.createElement(index_2.Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss },
React.createElement("div", { className: modalClassName, ref: this._onDialogRef },
React.createElement(Overlay_1.Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? null : onDismiss }),
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Dialog-main', styles.main, this.props.containerClassName), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children)))));
}
var _c;
};
Modal.prototype._onDialogRef = function (ref) {
if (ref) {
this._events.on(ref, 'animationend', this._onAnimationEnd);
}
else {
this._events.off();
}
};
// Watch for completed animations and set the state
Modal.prototype._onAnimationEnd = function (ev) {
// The dialog has just opened (faded in)
if (ev.animationName.indexOf('fadeIn') > -1) {
this.setState({
isOpen: true,
isAnimatingOpen: false
});
}
// The dialog has just closed (faded out)
if (ev.animationName.indexOf('fadeOut') > -1) {
this.setState({
isOpen: false,
isAnimatingClose: false
});
// Call the onDismiss callback
if (this.props.onDismissed) {
this.props.onDismissed();
}
}
};
return Modal;
}(Utilities_1.BaseComponent));
Modal.defaultProps = {
isOpen: false,
isDarkOverlay: true,
isBlocking: false,
className: '',
containerClassName: '',
};
Modal = __decorate([
withResponsiveMode_1.withResponsiveMode
], Modal);
exports.Modal = Modal;
});
//# sourceMappingURL=Modal.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_7a7daa2a', isOpen: 'isOpen_7a7daa2a', main: 'main_7a7daa2a', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_7a7daa2a{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;background-color:transparent;position:fixed;height:100%;width:100%;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none}.root_7a7daa2a .ms-Button.ms-Button--compound{display:block}html[dir=ltr] .root_7a7daa2a .ms-Button.ms-Button--compound{margin-left:0}html[dir=rtl] .root_7a7daa2a .ms-Button.ms-Button--compound{margin-right:0}@media screen and (-ms-high-contrast:active){.root_7a7daa2a .ms-Overlay{opacity:0}}.root_7a7daa2a.isOpen_7a7daa2a{display:-webkit-box;display:-ms-flexbox;display:flex}.main_7a7daa2a{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-sizing:border-box;position:relative;outline:3px solid transparent;max-height:100%;overflow-y:auto}html[dir=ltr] .main_7a7daa2a{text-align:left}html[dir=rtl] .main_7a7daa2a{text-align:right}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Modal.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "office-ui-fabric-react/lib/Link", "./examples/Modal.Basic.Example"], function (require, exports, React, example_app_base_1, Link_1, Modal_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ModalBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx');
var ModalPage = (function (_super) {
__extends(ModalPage, _super);
function ModalPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ModalPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Modal', componentName: 'ModalExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Modal', code: ModalBasicExampleCode },
React.createElement(Modal_Basic_Example_1.ModalBasicExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Modal/Modal.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content."),
React.createElement("p", null,
"For usage requiring a quick choice from the user, ",
React.createElement(Link_1.Link, { href: '#/examples/dialog' }, "Dialog"),
" may be a more appropriate control.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Modals for actionable interactions, such as needing the user to provide information or change settings."),
React.createElement("li", null, "When possible, try a non-blocking Modal before resorting to a blocking Modal."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return ModalPage;
}(React.Component));
exports.ModalPage = ModalPage;
});
//# sourceMappingURL=ModalPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Modal"], function (require, exports, Modal_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Modal_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Nav.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Nav.js | 5.56% | (6 / 108) | 4.71% | (4 / 85) | 3.85% | (1 / 26) | 5.83% | (6 / 103) | |
| Nav.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| NavPage.js | 24% | (6 / 25) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 27.27% | (6 / 22) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Nav.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../Button", "./Nav.scss"], function (require, exports, React, Utilities_1, FocusZone_1, Button_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// The number pixels per indentation level for Nav links.
var _indentationSize = 14;
// Tne number of pixels of left margin when there is expand/collaps button
var _indentWithExpandButton = 28;
// Tne number of pixels of left margin when there is expand/collaps button
var _indentNoExpandButton = 20;
// global var used in _isLinkSelectedKey
var _urlResolver;
var Nav = (function (_super) {
__extends(Nav, _super);
function Nav(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isGroupCollapsed: {},
isLinkExpandStateChanged: false,
selectedKey: props.initialSelectedKey || props.selectedKey,
};
_this._hasExpandButton = false;
return _this;
}
Nav.prototype.render = function () {
var _this = this;
var _a = this.props, groups = _a.groups, className = _a.className, isOnTop = _a.isOnTop;
if (!groups) {
return null;
}
// when this.props.groups[x].name is specified or Any of the link has child link, chevorn Expand/collaps button is shown,
// different padding is needed. _hasExpandButton marks this condition.
this._hasExpandButton = groups.some(function (group, groupIndex) {
return !!group && !!group.name || group.links && group.links.some(function (link, linkIndex) {
return !!link && !!link.links && link.links.length > 0;
});
});
var groupElements = groups.map(function (group, groupIndex) { return _this._renderGroup(group, groupIndex); });
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical },
React.createElement("nav", { role: 'navigation', className: Utilities_1.css('ms-Nav', styles.root, className, (_b = {
'is-onTop ms-u-slideRightIn40': isOnTop
},
_b[styles.rootIsOnTop] = isOnTop,
_b)) }, groupElements)));
var _b;
};
Object.defineProperty(Nav.prototype, "selectedKey", {
get: function () {
return this.state.selectedKey;
},
enumerable: true,
configurable: true
});
Nav.prototype._renderAnchorLink = function (link, linkIndex, nestingLevel) {
// Determine the appropriate padding to add before this link.
// In RTL, the "before" padding will go on the right instead of the left.
var isRtl = Utilities_1.getRTL();
var paddingBefore = (_indentationSize * nestingLevel +
(this._hasExpandButton ? _indentWithExpandButton : _indentNoExpandButton)).toString(10) + 'px';
return (React.createElement("a", { className: Utilities_1.css('ms-Nav-link', styles.link), style: (_a = {}, _a[isRtl ? 'paddingRight' : 'paddingLeft'] = paddingBefore, _a), href: link.url || 'javascript:', onClick: this._onNavAnchorLinkClicked.bind(this, link), "aria-label": link.ariaLabel, title: link.title || link.name, target: link.target },
link.iconClassName && React.createElement("i", { className: Utilities_1.css('ms-Icon', 'ms-Nav-IconLink', link.iconClassName, styles.iconLink) }),
this.props.onRenderLink(link)));
var _a;
};
Nav.prototype._renderButtonLink = function (link, linkIndex) {
return (React.createElement(Button_1.CommandButton, { className: Utilities_1.css('ms-Nav-link ms-Nav-linkButton', styles.link, (_a = {
'isOnExpanded': this._hasExpandButton
},
_a[styles.linkIsOnExpanded] = this._hasExpandButton,
_a)), href: link.url, iconProps: { iconName: link.icon }, description: link.title || link.name, onClick: this._onNavButtonLinkClicked.bind(this, link) }, link.name));
var _a;
};
Nav.prototype._renderCompositeLink = function (link, linkIndex, nestingLevel) {
var isLinkSelected = this._isLinkSelected(link);
return (React.createElement("div", { key: link.key || linkIndex, className: Utilities_1.css('ms-Nav-compositeLink', styles.compositeLink, (_a = {
' is-expanded': link.isExpanded,
'is-selected': isLinkSelected
},
_a[styles.compositeLinkIsExpanded] = link.isExpanded,
_a[styles.compositeLinkIsSelected] = isLinkSelected,
_a)) },
(nestingLevel === 0 && link.links && link.links.length > 0 ?
React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--link', styles.chevronButton, styles.chevronButtonLink), onClick: this._onLinkExpandClicked.bind(this, link), "aria-label": this.props.expandButtonAriaLabel, "aria-expanded": link.isExpanded ? 'true' : 'false' },
React.createElement("i", { className: Utilities_1.css('ms-Nav-chevron ms-Icon ms-Icon--ChevronDown', styles.chevronIcon) })) : null),
!!link.onClick ? this._renderButtonLink(link, linkIndex) : this._renderAnchorLink(link, linkIndex, nestingLevel)));
var _a;
};
Nav.prototype._renderLink = function (link, linkIndex, nestingLevel) {
return (React.createElement("li", { key: link.key || linkIndex, role: 'listitem', className: Utilities_1.css(styles.navItem) },
this._renderCompositeLink(link, linkIndex, nestingLevel),
(link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null)));
};
Nav.prototype._renderLinks = function (links, nestingLevel) {
var _this = this;
if (!links || !links.length) {
return null;
}
var linkElements = links.map(function (link, linkIndex) { return _this._renderLink(link, linkIndex, nestingLevel); });
return (React.createElement("ul", { role: 'list', "aria-label": this.props.ariaLabel, className: Utilities_1.css(styles.navItems) }, linkElements));
};
Nav.prototype._renderGroup = function (group, groupIndex) {
var isGroupExpanded = !this.state.isGroupCollapsed[group.name];
return (React.createElement("div", { key: groupIndex, className: Utilities_1.css('ms-Nav-group', styles.group, (_a = {
'is-expanded': isGroupExpanded
},
_a[styles.groupIsExpanded] = isGroupExpanded,
_a)) },
(group.name ?
React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize), onClick: this._onGroupHeaderClicked.bind(this, group.name) },
React.createElement("i", { className: Utilities_1.css('ms-Nav-chevron ms-Icon ms-Icon--ChevronDown', styles.chevronIcon, isGroupExpanded && styles.chevronIsExpanded) }),
group.name) : null),
React.createElement("div", { className: Utilities_1.css('ms-Nav-groupContent', 'ms-u-slideDownIn20', styles.groupContent) }, this._renderLinks(group.links, 0 /* nestingLevel */))));
var _a;
};
Nav.prototype._onGroupHeaderClicked = function (groupKey, ev) {
var isGroupCollapsed = this.state.isGroupCollapsed;
isGroupCollapsed[groupKey] = !isGroupCollapsed[groupKey];
this.setState({ isGroupCollapsed: isGroupCollapsed });
ev.preventDefault();
ev.stopPropagation();
};
Nav.prototype._onLinkExpandClicked = function (link, ev) {
link.isExpanded = !link.isExpanded;
this.setState({ isLinkExpandStateChanged: true });
ev.preventDefault();
ev.stopPropagation();
};
Nav.prototype._onNavAnchorLinkClicked = function (link, ev) {
if (this.props.onLinkClick) {
this.props.onLinkClick(ev, link);
}
this.setState({ selectedKey: link.key });
};
Nav.prototype._onNavButtonLinkClicked = function (link, ev) {
if (link.onClick) {
link.onClick(ev, link);
}
this.setState({ selectedKey: link.key });
};
Nav.prototype._isLinkSelected = function (link) {
// if caller passes in selectedKey, use it as first choice or
// if current state.selectedKey (from addressbar) is match to the link
if (this.props.selectedKey !== undefined) {
return link.key === this.props.selectedKey;
}
else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) {
return true;
}
// resolve is not supported for ssr
if (typeof (window) === 'undefined') {
return false;
}
if (!link.url) {
return false;
}
_urlResolver = _urlResolver || document.createElement('a');
_urlResolver.href = link.url || '';
var target = _urlResolver.href;
if (location.href === target) {
return true;
}
if (location.protocol + '//' + location.host + location.pathname === target) {
return true;
}
if (location.hash) {
// Match the hash to the url.
if (location.hash === link.url) {
return true;
}
// Match a rebased url. (e.g. #foo becomes http://hostname/foo)
_urlResolver.href = location.hash.substring(1);
return _urlResolver.href === target;
}
return false;
};
return Nav;
}(Utilities_1.BaseComponent));
Nav.defaultProps = {
groups: null,
onRenderLink: function (link) { return (React.createElement("span", { className: Utilities_1.css('ms-Nav-linkText', styles.linkText) }, link.name)); }
};
exports.Nav = Nav;
});
//# sourceMappingURL=Nav.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_001f3f60', rootIsOnTop: 'rootIsOnTop_001f3f60', navItems: 'navItems_001f3f60', navItem: 'navItem_001f3f60', groupContent: 'groupContent_001f3f60', group: 'group_001f3f60', groupIsExpanded: 'groupIsExpanded_001f3f60', icon: 'icon_001f3f60', iconLink: 'iconLink_001f3f60', chevronButton: 'chevronButton_001f3f60', chevronButtonIsGroup: 'chevronButtonIsGroup_001f3f60', chevronIcon: 'chevronIcon_001f3f60', chevronIsExpanded: 'chevronIsExpanded_001f3f60', linkText: 'linkText_001f3f60', compositeLink: 'compositeLink_001f3f60', chevronButtonLink: 'chevronButtonLink_001f3f60', compositeLinkIsExpanded: 'compositeLinkIsExpanded_001f3f60', compositeLinkIsSelected: 'compositeLinkIsSelected_001f3f60', link: 'link_001f3f60', groupHeaderFontSize: 'groupHeaderFontSize_001f3f60', chevronButtonGroup: 'chevronButtonGroup_001f3f60', linkIsOnExpanded: 'linkIsOnExpanded_001f3f60', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_001f3f60{overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rootIsOnTop_001f3f60{position:absolute}.navItems_001f3f60{list-style-type:none}.navItems_001f3f60,.navItems_001f3f60>.navItem_001f3f60{padding:0}.groupContent_001f3f60{display:none;margin-bottom:40px}.group_001f3f60.groupIsExpanded_001f3f60 .groupContent_001f3f60{display:block}.icon_001f3f60{padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}html[dir=ltr] .iconLink_001f3f60{margin-right:4px}html[dir=rtl] .iconLink_001f3f60{margin-left:4px}.chevronButton_001f3f60{display:block;font-weight:400;font-size:12px;line-height:36px;margin:5px 0;padding:0 20px 0 28px;background:0 0;border:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=ltr] .chevronButton_001f3f60{text-align:left}html[dir=rtl] .chevronButton_001f3f60{text-align:right}html[dir=rtl] .chevronButton_001f3f60{padding:0 28px 0 20px}.chevronButton_001f3f60:visited{color:inherit}.chevronButton_001f3f60:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.chevronButton_001f3f60.chevronButtonIsGroup_001f3f60{width:100%;height:36px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.chevronIcon_001f3f60{position:absolute;height:36px;line-height:36px;font-size:12px;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}html[dir=ltr] .chevronIcon_001f3f60{left:8px}html[dir=rtl] .chevronIcon_001f3f60{right:8px}.chevronIsExpanded_001f3f60{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.linkText_001f3f60{vertical-align:middle}.compositeLink_001f3f60{display:block;position:relative;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60{display:block;width:26px;height:34px;position:absolute;top:1px;z-index:1;padding:0;margin:0}html[dir=ltr] .compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60{left:1px}html[dir=rtl] .compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60{right:1px}.compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60 .chevronIcon_001f3f60{position:relative}.compositeLink_001f3f60 a{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_001f3f60:hover .chevronButton_001f3f60,.compositeLink_001f3f60:hover a{background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_001f3f60.compositeLinkIsExpanded_001f3f60 .chevronIcon_001f3f60{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60,.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{content:'';position:absolute;top:0;bottom:0}html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{border-left:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{border-right:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{right:0}html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{left:0}html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{left:0}html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{right:0}.link_001f3f60{display:block;position:relative;height:36px;line-height:36px;text-decoration:none;padding:0 20px;cursor:pointer;text-overflow:ellipsis;text-decoration:none;white-space:nowrap;overflow:hidden}.groupHeaderFontSize_001f3f60{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300}.chevronButtonGroup_001f3f60::-moz-focus-inner,.chevronButtonLink_001f3f60::-moz-focus-inner,.chevronButton_001f3f60::-moz-focus-inner,.link_001f3f60::-moz-focus-inner{border:0}.chevronButtonGroup_001f3f60,.chevronButtonLink_001f3f60,.chevronButton_001f3f60,.link_001f3f60{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .chevronButtonGroup_001f3f60:focus:after,.ms-Fabric.is-focusVisible .chevronButtonLink_001f3f60:focus:after,.ms-Fabric.is-focusVisible .chevronButton_001f3f60:focus:after,.ms-Fabric.is-focusVisible .link_001f3f60:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_001f3f60 .link_001f3f60{padding-left:20px}html[dir=rtl] .root_001f3f60 .link_001f3f60{padding-right:20px}.root_001f3f60 .link_001f3f60 .ms-Button-label{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] .root_001f3f60 .link_001f3f60.linkIsOnExpanded_001f3f60{padding-left:28px}html[dir=rtl] .root_001f3f60 .link_001f3f60.linkIsOnExpanded_001f3f60{padding-right:28px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Nav.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Nav.Basic.Example", "./examples/Nav.FabricDemoApp.Example", "./examples/Nav.Nested.Example", "./examples/Nav.ByKeys.Example"], function (require, exports, React, example_app_base_1, Nav_Basic_Example_1, Nav_FabricDemoApp_Example_1, Nav_Nested_Example_1, Nav_ByKeys_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var NavBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx');
var NavFabricDemoAppExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx');
var NavNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx');
var NavByKeysExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx');
var NavPage = (function (_super) {
__extends(NavPage, _super);
function NavPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
NavPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Nav', componentName: 'NavExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic Nav bar with sample links', code: NavBasicExampleCode },
React.createElement(Nav_Basic_Example_1.NavBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Navigation menu used in this Fabric React demo app', code: NavFabricDemoAppExampleCode },
React.createElement(Nav_FabricDemoApp_Example_1.NavFabricDemoAppExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nested navigation menu (without group header)', code: NavNestedExampleCode },
React.createElement(Nav_Nested_Example_1.NavNestedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nav bar of links each with unique keys and empty urls', code: NavByKeysExampleCode },
React.createElement(Nav_ByKeys_Example_1.NavByKeysExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Nav/Nav.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Navs (also called \"left nav\" or \"navigation pane\") provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a skinnier version or be completely hidden until the user taps an icon.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Nav for apps with many top-level navigation items that are of similar type. For example, a sports app with categories like Football, Baseball, Basketball, Soccer, and so on."),
React.createElement("li", null, "Keep the names of the navigation items brief and clear, rather than trying to be overly specific."),
React.createElement("li", null, "Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. \u201CFiles\u201D), others as adjectives (\u201CShared\u201D). Use what makes sense for users, and keep it short! "),
React.createElement("li", null, "Try to keep your app\u2019s nav in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them."),
React.createElement("li", null, "UseNav for an app with a medium to high number of top-level views or categories. If your app is very simple, you may prefer a simpler hub-and-spoke layout."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Overload your Nav. Too many items in the Nav is indicative of an app that is poorly organized or trying to do too much."),
React.createElement("li", null, "Include actions. You may reserve a space for actions, if you keep them well separated from the main Nav and their appearance makes it obvious that tapping them will execute a command instead of navigating."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return NavPage;
}(React.Component));
exports.NavPage = NavPage;
});
//# sourceMappingURL=NavPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Nav"], function (require, exports, Nav_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Nav_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Overlay.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Overlay.js | 19.44% | (7 / 36) | 35% | (7 / 20) | 8.33% | (1 / 12) | 21.88% | (7 / 32) | |
| Overlay.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| OverlayPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Overlay.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./Overlay.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Overlay = (function (_super) {
__extends(Overlay, _super);
function Overlay() {
return _super !== null && _super.apply(this, arguments) || this;
}
Overlay.prototype.componentDidMount = function () {
Utilities_1.disableBodyScroll();
};
Overlay.prototype.componentWillUnmount = function () {
Utilities_1.enableBodyScroll();
};
Overlay.prototype.render = function () {
var _a = this.props, isDarkThemed = _a.isDarkThemed, className = _a.className;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var modifiedClassName = Utilities_1.css('ms-Overlay', styles.root, className, (_b = {},
_b['ms-Overlay--dark ' + styles.rootIsDark] = isDarkThemed,
_b));
return (React.createElement("div", __assign({}, divProps, { className: modifiedClassName })));
var _b;
};
return Overlay;
}(Utilities_1.BaseComponent));
exports.Overlay = Overlay;
});
//# sourceMappingURL=Overlay.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_3e24bd80', rootIsNone: 'rootIsNone_3e24bd80', rootIsDark: 'rootIsDark_3e24bd80', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_3e24bd80{background-color:" }, { "theme": "whiteTranslucent40", "defaultValue": "rgba(255,255,255,.4)" }, { "rawString": ";position:absolute;bottom:0;left:0;right:0;top:0}.root_3e24bd80.rootIsNone_3e24bd80{visibility:hidden}.root_3e24bd80.rootIsDark_3e24bd80{background-color:" }, { "theme": "blackTranslucent40", "defaultValue": "rgba(0,0,0,.4)" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Overlay.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Overlay.Dark.Example", "./examples/Overlay.Light.Example"], function (require, exports, React, example_app_base_1, Overlay_Dark_Example_1, Overlay_Light_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var OverlayLightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx');
var OverlayDarkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx');
var OverlayPage = (function (_super) {
__extends(OverlayPage, _super);
function OverlayPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
OverlayPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Overlay', componentName: 'OverlayExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Light', code: OverlayLightExampleCode },
React.createElement(Overlay_Light_Example_1.OverlayLightExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Dark', code: OverlayDarkExampleCode },
React.createElement(Overlay_Dark_Example_1.OverlayDarkExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Overlay/Overlay.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a dark Overlay with a first-run experience."),
React.createElement("li", null, "Use a white Overlay for dialogs and panels."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use an Overlay when you want the user to interact with the UI that is being covered."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Overlay/Overlay.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return OverlayPage;
}(React.Component));
exports.OverlayPage = OverlayPage;
});
//# sourceMappingURL=OverlayPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Overlay"], function (require, exports, Overlay_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Overlay_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Panel.Props.js | 8.33% | (1 / 12) | 0% | (0 / 2) | 0% | (0 / 2) | 8.33% | (1 / 12) | |
| Panel.js | 7.14% | (8 / 112) | 8.62% | (10 / 116) | 4.17% | (1 / 24) | 7.62% | (8 / 105) | |
| Panel.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| PanelPage.js | 19.35% | (6 / 31) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 21.43% | (6 / 28) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var PanelType; (function (PanelType) { /** * Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fluid width. * Only used on Small screen breakpoints. * Small: 320-479px width (full screen), 16px Left/Right padding * Medium: <unused> * Large: <unused> * XLarge: <unused> * XXLarge: <unused> */ PanelType[PanelType["smallFluid"] = 0] = "smallFluid"; /** * Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fixed width. * Small: 272px width, 16px Left/Right padding * Medium: 340px width, 16px Left/Right padding * Large: 340px width, 32px Left/Right padding * XLarge: 340px width, 32px Left/Right padding * XXLarge: 340px width, 40px Left/Right padding */ PanelType[PanelType["smallFixedFar"] = 1] = "smallFixedFar"; /** * Renders the panel in 'small' mode, anchored to the near side (left in LTR mode), and has a fixed width. * Small: 272px width, 16px Left/Right padding * Medium: 272px width, 16px Left/Right padding * Large: 272px width, 32px Left/Right padding * XLarge: 272px width, 32px Left/Right padding * XXLarge: 272px width, 32px Left/Right padding */ PanelType[PanelType["smallFixedNear"] = 2] = "smallFixedNear"; /** * Renders the panel in 'medium' mode, anchored to the far side (right in LTR mode). * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: 48px fixed left margin, 32px Left/Right padding * XLarge: 644px width, 32px Left/Right padding * XXLarge: 643px width, 40px Left/Right padding */ PanelType[PanelType["medium"] = 3] = "medium"; /** * Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fluid at XXX-Large breakpoint. * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: <adapts to medium> * XLarge: 48px fixed left margin, 32px Left/Right padding * XXLarge: 48px fixed left margin, 32px Left/Right padding * XXXLarge: 48px fixed left margin, (no redlines for padding, assuming previous breakpoint) */ PanelType[PanelType["large"] = 4] = "large"; /** * Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fixed at XXX-Large breakpoint. * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: <adapts to medium> * XLarge: 48px fixed left margin, 32px Left/Right padding * XXLarge: 48px fixed left margin, 32px Left/Right padding * XXXLarge: 940px width, (no redlines for padding, assuming previous breakpoint) */ PanelType[PanelType["largeFixed"] = 5] = "largeFixed"; /** * Renders the panel in 'extra large' mode, anchored to the far side (right in LTR mode). * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: <adapts to medium> * XLarge: <adapts to large> * XXLarge: 176px fixed left margin, 40px Left/Right padding * XXXLarge: 176px fixed left margin, 40px Left/Right padding */ PanelType[PanelType["extraLarge"] = 6] = "extraLarge"; /** * Renders the panel in 'custom' mode using customWidth, anchored to the far side (right in LTR mode). * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: 48px fixed left margin, 32px Left/Right padding * XLarge: 644px width, 32px Left/Right padding * XXLarge: 643px width, 40px Left/Right padding */ PanelType[PanelType["custom"] = 7] = "custom"; })(PanelType = exports.PanelType || (exports.PanelType = {})); }); //# sourceMappingURL=Panel.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../FocusTrapZone/index", "./Panel.Props", "../Layer/Layer", "../../Overlay", "../../Popup", "../../Button", "./Panel.scss"], function (require, exports, React, Utilities_1, index_1, Panel_Props_1, Layer_1, Overlay_1, Popup_1, Button_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Animation class constants.
var FADE_IN_200 = 'ms-u-fadeIn200';
var FADE_OUT_200 = 'ms-u-fadeOut200';
var SLIDE_LEFT_IN_40 = 'ms-u-slideLeftIn40';
var SLIDE_LEFT_OUT_40 = 'ms-u-slideLeftOut40';
var SLIDE_RIGHT_IN_40 = 'ms-u-slideRightIn40';
var SLIDE_RIGHT_OUT_40 = 'ms-u-slideRightOut40';
var Panel = (function (_super) {
__extends(Panel, _super);
function Panel(props) {
var _this = _super.call(this, props) || this;
_this._onPanelClick = _this._onPanelClick.bind(_this);
_this._onPanelRef = _this._onPanelRef.bind(_this);
_this.state = {
isFooterSticky: false,
isOpen: !!props.isOpen,
isAnimatingOpen: props.isOpen,
isAnimatingClose: false,
id: Utilities_1.getId('Panel')
};
return _this;
}
Panel.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'resize', this._updateFooterPosition);
if (this.state.isOpen) {
this._async.setTimeout(function () {
_this.setState({
isAnimatingOpen: false
});
}, 2000);
}
};
Panel.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.isOpen !== this.state.isOpen) {
this.setState({
isOpen: true,
isAnimatingOpen: newProps.isOpen ? true : false,
isAnimatingClose: newProps.isOpen ? false : true
});
}
};
Panel.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevState.isOpen === false) {
this._updateFooterPosition();
}
if (prevState.isAnimatingClose === false &&
this.state.isAnimatingClose === true &&
this.props.onDismiss) {
this.props.onDismiss();
}
};
Panel.prototype.render = function () {
var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onRenderNavigation, onRenderNavigation = _c === void 0 ? this._onRenderNavigation : _c, _d = _a.onRenderHeader, onRenderHeader = _d === void 0 ? this._onRenderHeader : _d, _e = _a.onRenderBody, onRenderBody = _e === void 0 ? this._onRenderBody : _e, _f = _a.onRenderFooter, onRenderFooter = _f === void 0 ? this._onRenderFooter : _f;
var _g = this.state, isOpen = _g.isOpen, isAnimatingOpen = _g.isAnimatingOpen, isAnimatingClose = _g.isAnimatingClose, id = _g.id, isFooterSticky = _g.isFooterSticky;
var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false;
var isRTL = Utilities_1.getRTL();
var isOnRightSide = isRTL ? isLeft : !isLeft;
var headerTextId = id + '-headerText';
var customWidthStyles = (type === Panel_Props_1.PanelType.custom) ? { width: customWidth } : {};
if (!isOpen) {
return null;
}
var overlay;
if (isBlocking) {
overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, (_h = {},
_h[FADE_IN_200] = isAnimatingOpen,
_h[FADE_OUT_200] = isAnimatingClose,
_h)), isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null }));
}
return (React.createElement(Layer_1.Layer, __assign({}, layerProps),
React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.props.onDismiss },
React.createElement("div", { ref: this._onPanelRef, className: Utilities_1.css('ms-Panel', styles.root, className, (_j = {},
// because the RTL animations are not being used, we need to set a class
_j['is-open ' + styles.rootIsOpen] = isOpen,
_j['ms-Panel--smFluid ' + styles.rootIsSmallFluid] = type === Panel_Props_1.PanelType.smallFluid,
_j['ms-Panel--smLeft ' + styles.rootIsSmallLeft] = type === Panel_Props_1.PanelType.smallFixedNear,
_j['ms-Panel--sm ' + styles.rootIsSmall] = type === Panel_Props_1.PanelType.smallFixedFar,
_j['ms-Panel--md ' + styles.rootIsMedium] = type === Panel_Props_1.PanelType.medium,
_j['ms-Panel--lg ' + styles.rootIsLarge] = type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed,
_j['ms-Panel--fixed ' + styles.rootIsFixed] = type === Panel_Props_1.PanelType.largeFixed,
_j['ms-Panel--xl ' + styles.rootIsXLarge] = type === Panel_Props_1.PanelType.extraLarge,
_j['ms-Panel--custom ' + styles.rootIsCustom] = type === Panel_Props_1.PanelType.custom,
_j['ms-Panel--hasCloseButton ' + styles.rootHasCloseButton] = hasCloseButton,
_j)) },
overlay,
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', styles.main, (_k = {},
_k[SLIDE_RIGHT_IN_40] = isAnimatingOpen && !isOnRightSide,
_k[SLIDE_LEFT_IN_40] = isAnimatingOpen && isOnRightSide,
_k[SLIDE_LEFT_OUT_40] = isAnimatingClose && !isOnRightSide,
_k[SLIDE_RIGHT_OUT_40] = isAnimatingClose && isOnRightSide,
_k)), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector },
React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)),
React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) },
onRenderHeader(this.props, this._onRenderHeader),
onRenderBody(this.props, this._onRenderBody),
onRenderFooter(this.props, this._onRenderFooter)))))));
var _h, _j, _k;
};
Panel.prototype.dismiss = function () {
if (this.state.isOpen) {
this.setState({
isAnimatingOpen: false,
isAnimatingClose: true
});
}
};
Panel.prototype._onRenderNavigation = function (props) {
var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
return (hasCloseButton &&
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton), onClick: this._onPanelClick, "aria-label": closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } }));
};
Panel.prototype._onRenderHeader = function (props) {
var headerText = props.headerText, headerTextId = props.headerTextId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
return (headerText &&
React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) },
React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: headerTextId, role: 'heading' }, headerText)));
};
Panel.prototype._onRenderBody = function (props) {
return (React.createElement("div", { className: Utilities_1.css('ms-Panel-content', styles.content), ref: this._resolveRef('_content') }, props.children));
};
Panel.prototype._onRenderFooter = function (props) {
var isFooterSticky = this.state.isFooterSticky;
var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
return (onRenderFooterContent != null &&
React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
};
Panel.prototype._updateFooterPosition = function () {
var _content = this._content;
if (_content) {
var height = _content.clientHeight;
var innerHeight_1 = _content.scrollHeight;
this.setState({
isFooterSticky: height < innerHeight_1 ? true : false
});
}
};
Panel.prototype._onPanelClick = function () {
this.dismiss();
};
Panel.prototype._onPanelRef = function (ref) {
if (ref) {
this._events.on(ref, 'animationend', this._onAnimationEnd);
}
else {
this._events.off();
}
};
Panel.prototype._onAnimationEnd = function (ev) {
if (ev.animationName.indexOf('In') > -1) {
this.setState({
isOpen: true,
isAnimatingOpen: false
});
}
if (ev.animationName.indexOf('Out') > -1) {
this.setState({
isOpen: false,
isAnimatingClose: false
});
if (this.props.onDismissed) {
this.props.onDismissed();
}
}
};
return Panel;
}(Utilities_1.BaseComponent));
Panel.defaultProps = {
isOpen: false,
isBlocking: true,
hasCloseButton: true,
type: Panel_Props_1.PanelType.smallFixedFar,
};
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderNavigation", null);
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderHeader", null);
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderBody", null);
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderFooter", null);
exports.Panel = Panel;
});
//# sourceMappingURL=Panel.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_317d2582', overlay: 'overlay_317d2582', main: 'main_317d2582', rootIsSmall: 'rootIsSmall_317d2582', rootIsSmallLeft: 'rootIsSmallLeft_317d2582', rootIsSmallFluid: 'rootIsSmallFluid_317d2582', rootIsMedium: 'rootIsMedium_317d2582', rootIsLarge: 'rootIsLarge_317d2582', rootIsXLarge: 'rootIsXLarge_317d2582', rootIsCustom: 'rootIsCustom_317d2582', rootIsFixed: 'rootIsFixed_317d2582', rootIsOpen: 'rootIsOpen_317d2582', closeButton: 'closeButton_317d2582', contentInner: 'contentInner_317d2582', rootHasCloseButton: 'rootHasCloseButton_317d2582', header: 'header_317d2582', content: 'content_317d2582', footerInner: 'footerInner_317d2582', footer: 'footer_317d2582', footerIsSticky: 'footerIsSticky_317d2582', headerText: 'headerText_317d2582', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_317d2582{display:none;pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0}.root_317d2582 .overlay_317d2582{display:none;pointer-events:none;opacity:1;cursor:pointer;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.main_317d2582{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;width:100%;bottom:0;top:0;display:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}html[dir=ltr] .main_317d2582{right:0}html[dir=rtl] .main_317d2582{left:0}@media (min-width:480px){.main_317d2582{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}html[dir=ltr] .main_317d2582{left:auto}html[dir=rtl] .main_317d2582{right:auto}}.root_317d2582.rootIsSmall_317d2582 .main_317d2582{width:272px}@media (min-width:480px){.root_317d2582.rootIsSmall_317d2582 .main_317d2582{width:340px}}.root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{width:272px}html[dir=ltr] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{right:auto}html[dir=rtl] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{left:auto}html[dir=ltr] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{left:0}html[dir=rtl] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{right:0}.root_317d2582.rootIsSmallFluid_317d2582 .main_317d2582{width:100%}@media (min-width:640px){.root_317d2582.rootIsCustom_317d2582 .main_317d2582,.root_317d2582.rootIsLarge_317d2582 .main_317d2582,.root_317d2582.rootIsMedium_317d2582 .main_317d2582,.root_317d2582.rootIsXLarge_317d2582 .main_317d2582{width:auto}html[dir=ltr] .root_317d2582.rootIsCustom_317d2582 .main_317d2582,html[dir=ltr] .root_317d2582.rootIsLarge_317d2582 .main_317d2582,html[dir=ltr] .root_317d2582.rootIsMedium_317d2582 .main_317d2582,html[dir=ltr] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{left:48px}html[dir=rtl] .root_317d2582.rootIsCustom_317d2582 .main_317d2582,html[dir=rtl] .root_317d2582.rootIsLarge_317d2582 .main_317d2582,html[dir=rtl] .root_317d2582.rootIsMedium_317d2582 .main_317d2582,html[dir=rtl] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{right:48px}}@media (min-width:1024px){.root_317d2582.rootIsMedium_317d2582 .main_317d2582{width:643px}html[dir=ltr] .root_317d2582.rootIsMedium_317d2582 .main_317d2582{left:auto}html[dir=rtl] .root_317d2582.rootIsMedium_317d2582 .main_317d2582{right:auto}}@media (min-width:1366px){html[dir=ltr] .root_317d2582.rootIsLarge_317d2582 .main_317d2582{left:428px}html[dir=rtl] .root_317d2582.rootIsLarge_317d2582 .main_317d2582{right:428px}}@media (min-width:1366px){.root_317d2582.rootIsLarge_317d2582.rootIsFixed_317d2582 .main_317d2582{width:940px}html[dir=ltr] .root_317d2582.rootIsLarge_317d2582.rootIsFixed_317d2582 .main_317d2582{left:auto}html[dir=rtl] .root_317d2582.rootIsLarge_317d2582.rootIsFixed_317d2582 .main_317d2582{right:auto}}@media (min-width:1366px){html[dir=ltr] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{left:176px}html[dir=rtl] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{right:176px}}@media (min-width:1024px){html[dir=ltr] .root_317d2582.rootIsCustom_317d2582 .main_317d2582{left:auto}html[dir=rtl] .root_317d2582.rootIsCustom_317d2582 .main_317d2582{right:auto}}.root_317d2582.rootIsOpen_317d2582{display:block}.root_317d2582.rootIsOpen_317d2582 .main_317d2582{opacity:1;pointer-events:auto;display:block}.root_317d2582.rootIsOpen_317d2582 .overlay_317d2582{cursor:pointer;display:block;pointer-events:auto}@media screen and (-ms-high-contrast:active){.root_317d2582.rootIsOpen_317d2582 .overlay_317d2582{opacity:0}}.closeButton_317d2582{background:0 0;border:0;cursor:pointer;position:absolute;top:0;height:40px;width:40px;line-height:40px;padding:0;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:16px}html[dir=ltr] .closeButton_317d2582{right:8px}html[dir=rtl] .closeButton_317d2582{left:8px}.closeButton_317d2582:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.contentInner_317d2582{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-overflow-scrolling:touch;-webkit-transform:translateZ(0);transform:translateZ(0)}.rootHasCloseButton_317d2582 .contentInner_317d2582{top:40px}.content_317d2582,.footerInner_317d2582,.header_317d2582{padding-left:16px;padding-right:16px}@media (min-width:640px){.content_317d2582,.footerInner_317d2582,.header_317d2582{padding-left:32px;padding-right:32px}}@media (min-width:1366px){.content_317d2582,.footerInner_317d2582,.header_317d2582{padding-left:40px;padding-right:40px}}.header_317d2582{margin:14px 0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}@media (min-width:1024px){.header_317d2582{margin-top:30px}}.content_317d2582{margin-bottom:0;overflow-y:auto}.footer_317d2582{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid transparent;transition:border 367ms cubic-bezier(.1,.25,.75,.9)}.footerInner_317d2582{padding-bottom:20px;padding-top:20px}.footerIsSticky_317d2582{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-top-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.headerText_317d2582{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";line-height:32px;margin:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Panel.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Panel.SmallRight.Example", "./examples/Panel.SmallLeft.Example", "./examples/Panel.SmallFluid.Example", "./examples/Panel.Medium.Example", "./examples/Panel.Large.Example", "./examples/Panel.LargeFixed.Example", "./examples/Panel.ExtraLarge.Example", "./examples/Panel.Custom.Example", "./examples/Panel.LightDismiss.Example", "./examples/Panel.NonModal.Example"], function (require, exports, React, example_app_base_1, Panel_SmallRight_Example_1, Panel_SmallLeft_Example_1, Panel_SmallFluid_Example_1, Panel_Medium_Example_1, Panel_Large_Example_1, Panel_LargeFixed_Example_1, Panel_ExtraLarge_Example_1, Panel_Custom_Example_1, Panel_LightDismiss_Example_1, Panel_NonModal_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PanelSmallRightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx');
var PanelSmallLeftExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx');
var PanelSmallFluidExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx');
var PanelMediumExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx');
var PanelLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx');
var PanelLargeFixedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx');
var PanelExtraLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx');
var PanelCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx');
var PanelLightDismissExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx');
var PanelNonModalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx');
var PanelPage = (function (_super) {
__extends(PanelPage, _super);
function PanelPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PanelPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Panel', componentName: 'PanelExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Anchored Right, Fixed Width', code: PanelSmallRightExampleCode },
React.createElement(Panel_SmallRight_Example_1.PanelSmallRightExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Anchored Left, Fixed Width', code: PanelSmallLeftExampleCode },
React.createElement(Panel_SmallLeft_Example_1.PanelSmallLeftExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Full Screen, Fluid Width', code: PanelSmallFluidExampleCode },
React.createElement(Panel_SmallFluid_Example_1.PanelSmallFluidExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Medium', code: PanelMediumExampleCode },
React.createElement(Panel_Medium_Example_1.PanelMediumExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Large', code: PanelLargeExampleCode },
React.createElement(Panel_Large_Example_1.PanelLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - LargeFixed', code: PanelLargeFixedExampleCode },
React.createElement(Panel_LargeFixed_Example_1.PanelLargeFixedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Extra Large', code: PanelExtraLargeExampleCode },
React.createElement(Panel_ExtraLarge_Example_1.PanelExtraLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Custom', code: PanelCustomExampleCode },
React.createElement(Panel_Custom_Example_1.PanelCustomExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Light Dismiss', code: PanelLightDismissExampleCode },
React.createElement(Panel_LightDismiss_Example_1.PanelLightDismissExample, null)),
",",
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Non-Modal', code: PanelNonModalExampleCode },
React.createElement(Panel_NonModal_Example_1.PanelNonModalExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Panel/Panel.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel."),
React.createElement("h2", { className: 'ms-font-xl' }, "Examples of experiences that use Panels"),
React.createElement("ul", null,
React.createElement("li", null, "Member or group list creation or management"),
React.createElement("li", null, "Document list creation or management"),
React.createElement("li", null, "Permissions creation or management"),
React.createElement("li", null, "Settings creation or management"),
React.createElement("li", null, "Multi-field forms"))), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use for self-contained experiences where the user does not need to interact with the app view to complete the task. "),
React.createElement("li", null, "Use for complex creation, edit or management experiences."),
React.createElement("li", null, "Consider how the panel and its contained contents will scale across Fabric\u2019s responsive web breakpoints."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use for experiences where the user needs to interact with the app view. Use a Pane (which pushes content, doesn\u2019t use an overlay, and sits on the same z-index as the rest of the UI) instead."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Panel/Panel.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PanelPage;
}(React.Component));
exports.PanelPage = PanelPage;
});
//# sourceMappingURL=PanelPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Panel", "./Panel.Props"], function (require, exports, Panel_1, Panel_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Panel_1); __export(Panel_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Persona.Props.js | 2.63% | (1 / 38) | 0% | (0 / 6) | 0% | (0 / 4) | 2.63% | (1 / 38) | |
| Persona.js | 9.64% | (8 / 83) | 14.71% | (10 / 68) | 6.67% | (1 / 15) | 10.53% | (8 / 76) | |
| Persona.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| PersonaConsts.js | 16.67% | (1 / 6) | 100% | (0 / 0) | 0% | (0 / 1) | 16.67% | (1 / 6) | |
| PersonaPage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 22.22% | (2 / 9) | 0% | (0 / 2) | 0% | (0 / 2) | 28.57% | (2 / 7) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var PersonaSize; (function (PersonaSize) { PersonaSize[PersonaSize["tiny"] = 0] = "tiny"; PersonaSize[PersonaSize["extraExtraSmall"] = 1] = "extraExtraSmall"; PersonaSize[PersonaSize["extraSmall"] = 2] = "extraSmall"; PersonaSize[PersonaSize["small"] = 3] = "small"; PersonaSize[PersonaSize["regular"] = 4] = "regular"; PersonaSize[PersonaSize["large"] = 5] = "large"; PersonaSize[PersonaSize["extraLarge"] = 6] = "extraLarge"; PersonaSize[PersonaSize["size28"] = 7] = "size28"; })(PersonaSize = exports.PersonaSize || (exports.PersonaSize = {})); var PersonaPresence; (function (PersonaPresence) { PersonaPresence[PersonaPresence["none"] = 0] = "none"; PersonaPresence[PersonaPresence["offline"] = 1] = "offline"; PersonaPresence[PersonaPresence["online"] = 2] = "online"; PersonaPresence[PersonaPresence["away"] = 3] = "away"; PersonaPresence[PersonaPresence["dnd"] = 4] = "dnd"; PersonaPresence[PersonaPresence["blocked"] = 5] = "blocked"; PersonaPresence[PersonaPresence["busy"] = 6] = "busy"; })(PersonaPresence = exports.PersonaPresence || (exports.PersonaPresence = {})); var PersonaInitialsColor; (function (PersonaInitialsColor) { PersonaInitialsColor[PersonaInitialsColor["lightBlue"] = 0] = "lightBlue"; PersonaInitialsColor[PersonaInitialsColor["blue"] = 1] = "blue"; PersonaInitialsColor[PersonaInitialsColor["darkBlue"] = 2] = "darkBlue"; PersonaInitialsColor[PersonaInitialsColor["teal"] = 3] = "teal"; PersonaInitialsColor[PersonaInitialsColor["lightGreen"] = 4] = "lightGreen"; PersonaInitialsColor[PersonaInitialsColor["green"] = 5] = "green"; PersonaInitialsColor[PersonaInitialsColor["darkGreen"] = 6] = "darkGreen"; PersonaInitialsColor[PersonaInitialsColor["lightPink"] = 7] = "lightPink"; PersonaInitialsColor[PersonaInitialsColor["pink"] = 8] = "pink"; PersonaInitialsColor[PersonaInitialsColor["magenta"] = 9] = "magenta"; PersonaInitialsColor[PersonaInitialsColor["purple"] = 10] = "purple"; PersonaInitialsColor[PersonaInitialsColor["black"] = 11] = "black"; PersonaInitialsColor[PersonaInitialsColor["orange"] = 12] = "orange"; PersonaInitialsColor[PersonaInitialsColor["red"] = 13] = "red"; PersonaInitialsColor[PersonaInitialsColor["darkRed"] = 14] = "darkRed"; })(PersonaInitialsColor = exports.PersonaInitialsColor || (exports.PersonaInitialsColor = {})); }); //# sourceMappingURL=Persona.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Image", "./Persona.Props", "./PersonaConsts", "./Persona.scss"], function (require, exports, React, Utilities_1, Image_1, Persona_Props_1, PersonaConsts_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// The RGB color swatches
var COLOR_SWATCHES_LOOKUP = [
Persona_Props_1.PersonaInitialsColor.lightGreen,
Persona_Props_1.PersonaInitialsColor.lightBlue,
Persona_Props_1.PersonaInitialsColor.lightPink,
Persona_Props_1.PersonaInitialsColor.green,
Persona_Props_1.PersonaInitialsColor.darkGreen,
Persona_Props_1.PersonaInitialsColor.pink,
Persona_Props_1.PersonaInitialsColor.magenta,
Persona_Props_1.PersonaInitialsColor.purple,
Persona_Props_1.PersonaInitialsColor.black,
Persona_Props_1.PersonaInitialsColor.teal,
Persona_Props_1.PersonaInitialsColor.blue,
Persona_Props_1.PersonaInitialsColor.darkBlue,
Persona_Props_1.PersonaInitialsColor.orange,
Persona_Props_1.PersonaInitialsColor.darkRed,
Persona_Props_1.PersonaInitialsColor.red
];
var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;
var Persona = (function (_super) {
__extends(Persona, _super);
function Persona(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isImageLoaded: false,
};
return _this;
}
Persona.prototype.render = function () {
var _a = this.props, className = _a.className, size = _a.size, imageUrl = _a.imageUrl, initialsColor = _a.initialsColor, presence = _a.presence, primaryText = _a.primaryText, secondaryText = _a.secondaryText, tertiaryText = _a.tertiaryText, optionalText = _a.optionalText, hidePersonaDetails = _a.hidePersonaDetails, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, onRenderPrimaryText = _a.onRenderPrimaryText, onRenderSecondaryText = _a.onRenderSecondaryText, onRenderTertiaryText = _a.onRenderTertiaryText, onRenderOptionalText = _a.onRenderOptionalText, imageShouldStartVisible = _a.imageShouldStartVisible;
initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText);
var presenceElement = null;
if (presence !== Persona_Props_1.PersonaPresence.none) {
var userPresence = Persona_Props_1.PersonaPresence[presence], statusIcon = null;
switch (userPresence) {
case 'online':
userPresence = 'SkypeCheck';
break;
case 'away':
userPresence = 'SkypeClock';
break;
case 'dnd':
userPresence = 'SkypeMinus';
break;
default:
userPresence = '';
}
if (userPresence) {
var iconClass = Utilities_1.css("ms-Persona-presenceIcon ms-Icon ms-Icon--" + userPresence, styles.presenceIcon);
statusIcon = React.createElement("i", { className: iconClass });
}
presenceElement = React.createElement("div", { className: Utilities_1.css('ms-Persona-presence', styles.presence) }, statusIcon);
}
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var personaDetails = React.createElement("div", { className: Utilities_1.css('ms-Persona-details', styles.details) },
this._renderElement(this.props.primaryText, Utilities_1.css('ms-Persona-primaryText', styles.primaryText), onRenderPrimaryText),
this._renderElement(this.props.secondaryText, Utilities_1.css('ms-Persona-secondaryText', styles.secondaryText), onRenderSecondaryText),
this._renderElement(this.props.tertiaryText, Utilities_1.css('ms-Persona-tertiaryText', styles.tertiaryText), onRenderTertiaryText),
this._renderElement(this.props.optionalText, Utilities_1.css('ms-Persona-optionalText', styles.optionalText), onRenderOptionalText),
this.props.children);
return (React.createElement("div", __assign({}, divProps, { className: Utilities_1.css('ms-Persona', styles.root, className, PersonaConsts_1.PERSONA_SIZE[size], PersonaConsts_1.PERSONA_PRESENCE[presence]) }),
size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea) },
!this.state.isImageLoaded &&
(React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]), "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }))),
presenceElement,
(!hidePersonaDetails || (size === Persona_Props_1.PersonaSize.tiny)) && personaDetails));
};
Persona.prototype._renderElement = function (text, className, render) {
return (React.createElement("div", { className: className }, render ? render(this.props) : text));
};
Persona.prototype._onRenderInitials = function (props) {
var imageInitials = props.imageInitials, primaryText = props.primaryText;
var isRTL = Utilities_1.getRTL();
imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL);
return (React.createElement("span", null, imageInitials));
};
Persona.prototype._getColorFromName = function (displayName) {
var color = Persona_Props_1.PersonaInitialsColor.blue;
if (!displayName) {
return color;
}
var hashCode = 0;
for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {
var ch = displayName.charCodeAt(iLen);
var shift = iLen % 8;
// tslint:disable-next-line:no-bitwise
hashCode ^= (ch << shift) + (ch >> (8 - shift));
}
color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];
return color;
};
Persona.prototype._onPhotoLoadingStateChange = function (loadState) {
this.setState({
isImageLoaded: loadState === Image_1.ImageLoadState.loaded
});
};
return Persona;
}(Utilities_1.BaseComponent));
Persona.defaultProps = {
primaryText: '',
size: Persona_Props_1.PersonaSize.regular,
presence: Persona_Props_1.PersonaPresence.none
};
__decorate([
Utilities_1.autobind
], Persona.prototype, "_renderElement", null);
__decorate([
Utilities_1.autobind
], Persona.prototype, "_onRenderInitials", null);
__decorate([
Utilities_1.autobind
], Persona.prototype, "_onPhotoLoadingStateChange", null);
exports.Persona = Persona;
});
//# sourceMappingURL=Persona.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_55c3f64b', contextualHost: 'contextualHost_55c3f64b', imageArea: 'imageArea_55c3f64b', image: 'image_55c3f64b', placeholder: 'placeholder_55c3f64b', initials: 'initials_55c3f64b', initialsIsLightBlue: 'initialsIsLightBlue_55c3f64b', initialsIsBlue: 'initialsIsBlue_55c3f64b', initialsIsDarkBlue: 'initialsIsDarkBlue_55c3f64b', initialsIsTeal: 'initialsIsTeal_55c3f64b', initialsIsLightGreen: 'initialsIsLightGreen_55c3f64b', initialsIsGreen: 'initialsIsGreen_55c3f64b', initialsIsDarkGreen: 'initialsIsDarkGreen_55c3f64b', initialsIsLightPink: 'initialsIsLightPink_55c3f64b', initialsIsPink: 'initialsIsPink_55c3f64b', initialsIsMagenta: 'initialsIsMagenta_55c3f64b', initialsIsPurple: 'initialsIsPurple_55c3f64b', initialsIsBlack: 'initialsIsBlack_55c3f64b', initialsIsOrange: 'initialsIsOrange_55c3f64b', initialsIsRed: 'initialsIsRed_55c3f64b', initialsIsDarkRed: 'initialsIsDarkRed_55c3f64b', presence: 'presence_55c3f64b', presenceIcon: 'presenceIcon_55c3f64b', details: 'details_55c3f64b', primaryText: 'primaryText_55c3f64b', secondaryText: 'secondaryText_55c3f64b', tertiaryText: 'tertiaryText_55c3f64b', optionalText: 'optionalText_55c3f64b', textContent: 'textContent_55c3f64b', rootIsTiny: 'rootIsTiny_55c3f64b', rootIsReadonly: 'rootIsReadonly_55c3f64b', rootIsExtraExtraSmall: 'rootIsExtraExtraSmall_55c3f64b', rootIs28: 'rootIs28_55c3f64b', rootIsExtraSmall: 'rootIsExtraSmall_55c3f64b', rootIsSmall: 'rootIsSmall_55c3f64b', rootIsLarge: 'rootIsLarge_55c3f64b', rootIsExtraLarge: 'rootIsExtraLarge_55c3f64b', rootIsDarkText: 'rootIsDarkText_55c3f64b', rootIsSelectable: 'rootIsSelectable_55c3f64b', rootExtraLarge: 'rootExtraLarge_55c3f64b', rootIsAvailable: 'rootIsAvailable_55c3f64b', rootIsAway: 'rootIsAway_55c3f64b', rootIsBlocked: 'rootIsBlocked_55c3f64b', rootIsBusy: 'rootIsBusy_55c3f64b', rootIsDoNotDisturb: 'rootIsDoNotDisturb_55c3f64b', rootIsOffline: 'rootIsOffline_55c3f64b', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_55c3f64b{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;line-height:1;position:relative;height:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.root_55c3f64b .contextualHost_55c3f64b{display:none}.imageArea_55c3f64b{position:relative;overflow:hidden;text-align:center;-webkit-box-flex:0;-ms-flex:0 0 48px;flex:0 0 48px;height:48px;width:48px;border-radius:50%}@media screen and (-ms-high-contrast:active){.imageArea_55c3f64b{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.imageArea_55c3f64b{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.imageArea_55c3f64b .image_55c3f64b{border:0}.placeholder_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.initials_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:17px;font-weight:100;line-height:46px;height:48px}.initials_55c3f64b.initialsIsLightBlue_55c3f64b{background-color:#6ba5e7}.initials_55c3f64b.initialsIsBlue_55c3f64b{background-color:#2d89ef}.initials_55c3f64b.initialsIsDarkBlue_55c3f64b{background-color:#2b5797}.initials_55c3f64b.initialsIsTeal_55c3f64b{background-color:#00aba9}.initials_55c3f64b.initialsIsLightGreen_55c3f64b{background-color:#99b433}.initials_55c3f64b.initialsIsGreen_55c3f64b{background-color:#00a300}.initials_55c3f64b.initialsIsDarkGreen_55c3f64b{background-color:#1e7145}.initials_55c3f64b.initialsIsLightPink_55c3f64b{background-color:#e773bd}.initials_55c3f64b.initialsIsPink_55c3f64b{background-color:#ff0097}.initials_55c3f64b.initialsIsMagenta_55c3f64b{background-color:#7e3878}.initials_55c3f64b.initialsIsPurple_55c3f64b{background-color:#603cba}.initials_55c3f64b.initialsIsBlack_55c3f64b{background-color:#1d1d1d}.initials_55c3f64b.initialsIsOrange_55c3f64b{background-color:#da532c}.initials_55c3f64b.initialsIsRed_55c3f64b{background-color:#e11}.initials_55c3f64b.initialsIsDarkRed_55c3f64b{background-color:#b91d47}.image_55c3f64b{position:absolute;top:0;width:100%;height:100%;border-radius:50%;-webkit-perspective:1px;perspective:1px}html[dir=ltr] .image_55c3f64b{margin-right:10px}html[dir=rtl] .image_55c3f64b{margin-left:10px}html[dir=ltr] .image_55c3f64b{left:0}html[dir=rtl] .image_55c3f64b{right:0}.image_55c3f64b[src=\"\"]{display:none}.presence_55c3f64b{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;bottom:-1px;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";text-align:center;box-sizing:content-box;-ms-high-contrast-adjust:none}html[dir=ltr] .presence_55c3f64b{left:34px}html[dir=rtl] .presence_55c3f64b{right:34px}@media screen and (-ms-high-contrast:active){.presence_55c3f64b{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_55c3f64b{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.presence_55c3f64b .presenceIcon_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:8px;line-height:12px;vertical-align:top}@media screen and (-ms-high-contrast:active){.presence_55c3f64b .presenceIcon_55c3f64b{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_55c3f64b .presenceIcon_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.details_55c3f64b{padding:0 24px 0 12px;min-width:0;width:100%}html[dir=rtl] .details_55c3f64b{padding:0 12px 0 24px}html[dir=ltr] .details_55c3f64b{text-align:left}html[dir=rtl] .details_55c3f64b{text-align:right}.optionalText_55c3f64b,.primaryText_55c3f64b,.secondaryText_55c3f64b,.tertiaryText_55c3f64b,.textContent_55c3f64b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primaryText_55c3f64b{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.optionalText_55c3f64b,.secondaryText_55c3f64b,.tertiaryText_55c3f64b{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.secondaryText_55c3f64b{padding-top:3px}.optionalText_55c3f64b,.tertiaryText_55c3f64b{padding-top:5px;display:none}.root_55c3f64b.rootIsTiny_55c3f64b{height:30px;min-width:30px}.root_55c3f64b.rootIsTiny_55c3f64b .imageArea_55c3f64b{overflow:visible;background:0 0;height:0;width:0}.root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{top:10px;border:0}html[dir=ltr] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{right:auto}html[dir=rtl] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{left:auto}html[dir=ltr] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{left:0}html[dir=rtl] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{right:0}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{top:9px;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}html[dir=ltr] .root_55c3f64b.rootIsTiny_55c3f64b .details_55c3f64b{padding-left:20px}html[dir=rtl] .root_55c3f64b.rootIsTiny_55c3f64b .details_55c3f64b{padding-right:20px}.root_55c3f64b.rootIsTiny_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:4px}.root_55c3f64b.rootIsTiny_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIsTiny_55c3f64b.rootIsReadonly_55c3f64b{padding:0;background-color:transparent}.root_55c3f64b.rootIsTiny_55c3f64b.rootIsReadonly_55c3f64b .primaryText_55c3f64b:after{content:';'}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b{height:24px;line-height:24px;min-width:24px;margin-right:4px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 24px;flex:0 0 24px;height:24px;width:24px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .placeholder_55c3f64b{font-size:18px;top:4px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .initials_55c3f64b{font-size:11px;height:24px;line-height:24px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presence_55c3f64b{height:8px;width:8px;border:4px solid #fff}html[dir=ltr] .root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presence_55c3f64b{left:16px}html[dir=rtl] .root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presence_55c3f64b{right:16px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presenceIcon_55c3f64b{font-size:6px;line-height:9px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:3px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIs28_55c3f64b{height:28px;line-height:28px;min-width:28px}.root_55c3f64b.rootIs28_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIs28_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 28px;flex:0 0 28px;height:28px;width:28px}.root_55c3f64b.rootIs28_55c3f64b .placeholder_55c3f64b{font-size:18px;top:4px}.root_55c3f64b.rootIs28_55c3f64b .initials_55c3f64b{font-size:11px;height:24px;line-height:24px}.root_55c3f64b.rootIs28_55c3f64b .presence_55c3f64b{height:8px;width:8px;border:4px solid #fff}html[dir=ltr] .root_55c3f64b.rootIs28_55c3f64b .presence_55c3f64b{left:16px}html[dir=rtl] .root_55c3f64b.rootIs28_55c3f64b .presence_55c3f64b{right:16px}.root_55c3f64b.rootIs28_55c3f64b .presenceIcon_55c3f64b{font-size:6px;line-height:9px}.root_55c3f64b.rootIs28_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:3px}.root_55c3f64b.rootIs28_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIsExtraSmall_55c3f64b{height:32px;line-height:32px;min-width:32px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsExtraSmall_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px;height:32px;width:32px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .placeholder_55c3f64b{font-size:28px;top:6px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .initials_55c3f64b{font-size:14px;height:32px;line-height:32px}html[dir=ltr] .root_55c3f64b.rootIsExtraSmall_55c3f64b .presence_55c3f64b{left:19px}html[dir=rtl] .root_55c3f64b.rootIsExtraSmall_55c3f64b .presence_55c3f64b{right:19px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:3px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIsSmall_55c3f64b{height:40px;line-height:40px;min-width:40px}.root_55c3f64b.rootIsSmall_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsSmall_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;height:40px;width:40px}.root_55c3f64b.rootIsSmall_55c3f64b .placeholder_55c3f64b{font-size:38px;top:5px}.root_55c3f64b.rootIsSmall_55c3f64b .initials_55c3f64b{font-size:14px;height:40px;line-height:40px}html[dir=ltr] .root_55c3f64b.rootIsSmall_55c3f64b .presence_55c3f64b{left:27px}html[dir=rtl] .root_55c3f64b.rootIsSmall_55c3f64b .presence_55c3f64b{right:27px}.root_55c3f64b.rootIsSmall_55c3f64b .primaryText_55c3f64b{font-size:14px}.root_55c3f64b.rootIsSmall_55c3f64b .primaryText_55c3f64b,.root_55c3f64b.rootIsSmall_55c3f64b .secondaryText_55c3f64b{padding-top:1px}.root_55c3f64b.rootIsLarge_55c3f64b{height:72px;line-height:72px;min-width:72px}.root_55c3f64b.rootIsLarge_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsLarge_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 72px;flex:0 0 72px;height:72px;width:72px}.root_55c3f64b.rootIsLarge_55c3f64b .placeholder_55c3f64b{font-size:67px;top:10px}.root_55c3f64b.rootIsLarge_55c3f64b .initials_55c3f64b{font-size:28px;height:72px;line-height:70px}.root_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b{height:20px;width:20px;border-width:3px}html[dir=ltr] .root_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b{left:49px}html[dir=rtl] .root_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b{right:49px}.root_55c3f64b.rootIsLarge_55c3f64b .presenceIcon_55c3f64b{line-height:20px;font-size:14px}.root_55c3f64b.rootIsLarge_55c3f64b .secondaryText_55c3f64b{padding-top:3px}.root_55c3f64b.rootIsLarge_55c3f64b .tertiaryText_55c3f64b{padding-top:5px;display:block}.root_55c3f64b.rootIsExtraLarge_55c3f64b{height:100px;line-height:100px;min-width:100px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsExtraLarge_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;height:100px;width:100px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .placeholder_55c3f64b{font-size:95px;top:12px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .initials_55c3f64b{font-size:42px;height:100px;line-height:96px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b{height:28px;width:28px;border-width:4px}html[dir=ltr] .root_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b{left:71px}html[dir=rtl] .root_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b{right:71px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .presenceIcon_55c3f64b{line-height:28px;font-size:21px;position:relative;top:1px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .primaryText_55c3f64b{font-size:21px;font-weight:300;margin-top:0}.root_55c3f64b.rootIsExtraLarge_55c3f64b .secondaryText_55c3f64b{padding-top:2px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .optionalText_55c3f64b,.root_55c3f64b.rootIsExtraLarge_55c3f64b .tertiaryText_55c3f64b{padding-top:5px;display:block}.root_55c3f64b.rootIsDarkText_55c3f64b .primaryText_55c3f64b{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_55c3f64b.rootIsDarkText_55c3f64b .optionalText_55c3f64b,.root_55c3f64b.rootIsDarkText_55c3f64b .secondaryText_55c3f64b,.root_55c3f64b.rootIsDarkText_55c3f64b .tertiaryText_55c3f64b{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.root_55c3f64b.rootIsSelectable_55c3f64b{cursor:pointer;padding:0 10px}.root_55c3f64b.rootIsSelectable_55c3f64b:not(.rootExtraLarge_55c3f64b):focus,.root_55c3f64b.rootIsSelectable_55c3f64b:not(.rootExtraLarge_55c3f64b):hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";outline:1px solid transparent}.root_55c3f64b.rootIsAvailable_55c3f64b .presence_55c3f64b{background-color:#7fba00}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsAvailable_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsAvailable_55c3f64b .presence_55c3f64b{background-color:#600000}}.root_55c3f64b.rootIsAway_55c3f64b .presence_55c3f64b{background-color:#fcd116}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsAway_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsAway_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_55c3f64b.rootIsAway_55c3f64b .presenceIcon_55c3f64b{position:relative}html[dir=ltr] .root_55c3f64b.rootIsAway_55c3f64b .presenceIcon_55c3f64b{left:1px}html[dir=rtl] .root_55c3f64b.rootIsAway_55c3f64b .presenceIcon_55c3f64b{right:1px}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{content:'';width:100%;height:100%;position:absolute;top:0;box-shadow:0 0 0 2px #d93b3b inset;border-radius:50%}html[dir=ltr] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{left:0}html[dir=rtl] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{right:0}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{content:'';width:100%;height:2px;background-color:#d93b3b;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:absolute;top:5px}html[dir=ltr] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{left:0}html[dir=rtl] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{right:0}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b{color:#0f0;background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{box-shadow:0 0 0 2px #0f0 inset}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b{color:#600000;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{box-shadow:0 0 0 2px #600000 inset}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{background-color:#600000}}.root_55c3f64b.rootIsBlocked_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b::after{top:9px}.root_55c3f64b.rootIsBlocked_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b::after{top:13px}.root_55c3f64b.rootIsBusy_55c3f64b .presence_55c3f64b{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsBusy_55c3f64b .presence_55c3f64b{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsBusy_55c3f64b .presence_55c3f64b{background-color:#600000}}.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b{background-color:#e81123}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:#0f0}.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b::before{background-color:#0f0}.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b::after{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b{background-color:#600000}}.root_55c3f64b.rootIsOffline_55c3f64b .presence_55c3f64b{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsOffline_55c3f64b .presence_55c3f64b{background-color:#0f0;box-shadow:0 0 0 1px " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": " inset}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsOffline_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:0 0 0 1px " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": " inset}}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Persona.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 | define(["require", "exports", "./Persona.Props", "./Persona.scss"], function (require, exports, Persona_Props_1, styles) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.PERSONA_SIZE = (_a = {}, _a[Persona_Props_1.PersonaSize.tiny] = 'ms-Persona--tiny ' + styles.rootIsTiny, _a[Persona_Props_1.PersonaSize.extraExtraSmall] = 'ms-Persona--xxs ' + styles.rootIsExtraExtraSmall, _a[Persona_Props_1.PersonaSize.extraSmall] = 'ms-Persona--xs ' + styles.rootIsExtraSmall, _a[Persona_Props_1.PersonaSize.small] = 'ms-Persona--sm ' + styles.rootIsSmall, _a[Persona_Props_1.PersonaSize.regular] = '', _a[Persona_Props_1.PersonaSize.large] = 'ms-Persona--lg ' + styles.rootIsLarge, _a[Persona_Props_1.PersonaSize.extraLarge] = 'ms-Persona--xl ' + styles.rootIsExtraLarge, _a[Persona_Props_1.PersonaSize.size28] = 'ms-Persona--28 ' + styles.rootIs28, _a); exports.PERSONA_PRESENCE = (_b = {}, _b[Persona_Props_1.PersonaPresence.offline] = 'ms-Persona--offline ' + styles.rootIsOffline, _b[Persona_Props_1.PersonaPresence.online] = 'ms-Persona--online ', _b[Persona_Props_1.PersonaPresence.away] = 'ms-Persona--away ' + styles.rootIsAway, _b[Persona_Props_1.PersonaPresence.dnd] = 'ms-Persona--dnd ' + styles.rootIsDoNotDisturb, _b[Persona_Props_1.PersonaPresence.blocked] = 'ms-Persona--blocked ' + styles.rootIsBlocked, _b[Persona_Props_1.PersonaPresence.busy] = 'ms-Persona--busy ' + styles.rootIsBusy, _b); exports.PERSONA_INITIALS_COLOR = (_c = {}, _c[Persona_Props_1.PersonaInitialsColor.lightBlue] = 'ms-Persona-initials--lightBlue ' + styles.initialsIsLightBlue, _c[Persona_Props_1.PersonaInitialsColor.blue] = 'ms-Persona-initials--blue ' + styles.initialsIsBlue, _c[Persona_Props_1.PersonaInitialsColor.darkBlue] = 'ms-Persona-initials--darkBlue ' + styles.initialsIsDarkBlue, _c[Persona_Props_1.PersonaInitialsColor.teal] = 'ms-Persona-initials--teal ' + styles.initialsIsTeal, _c[Persona_Props_1.PersonaInitialsColor.lightGreen] = 'ms-Persona-initials--lightGreen ' + styles.initialsIsLightGreen, _c[Persona_Props_1.PersonaInitialsColor.green] = 'ms-Persona-initials--green ' + styles.initialsIsGreen, _c[Persona_Props_1.PersonaInitialsColor.darkGreen] = 'ms-Persona-initials--darkGreen ' + styles.initialsIsDarkGreen, _c[Persona_Props_1.PersonaInitialsColor.lightPink] = 'ms-Persona-initials--lightPink ' + styles.initialsIsLightPink, _c[Persona_Props_1.PersonaInitialsColor.pink] = 'ms-Persona-initials--pink ' + styles.initialsIsPink, _c[Persona_Props_1.PersonaInitialsColor.magenta] = 'ms-Persona-initials--magenta ' + styles.initialsIsMagenta, _c[Persona_Props_1.PersonaInitialsColor.purple] = 'ms-Persona-initials--purple ' + styles.initialsIsPurple, _c[Persona_Props_1.PersonaInitialsColor.black] = 'ms-Persona-initials--black ' + styles.initialsIsBlack, _c[Persona_Props_1.PersonaInitialsColor.orange] = 'ms-Persona-initials--orange ' + styles.initialsIsGreen, _c[Persona_Props_1.PersonaInitialsColor.red] = 'ms-Persona-initials--red ' + styles.initialsIsRed, _c[Persona_Props_1.PersonaInitialsColor.darkRed] = 'ms-Persona-initials--darkRed ' + styles.initialsIsDarkRed, _c); var _a, _b, _c; }); //# sourceMappingURL=PersonaConsts.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Persona.Initials.Example", "./examples/Persona.Basic.Example", "./examples/Persona.CustomRender.Example"], function (require, exports, React, example_app_base_1, Persona_Initials_Example_1, Persona_Basic_Example_1, Persona_CustomRender_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx');
var PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx');
var PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx');
var PersonaPage = (function (_super) {
__extends(PersonaPage, _super);
function PersonaPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PersonaPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Persona', componentName: 'PersonaExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Persona in various sizes', code: PersonaBasicExampleCode },
React.createElement(Persona_Basic_Example_1.PersonaBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Persona in initials', code: PersonaInitialsExampleCode },
React.createElement(Persona_Initials_Example_1.PersonaInitialsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom persona text', code: PersonaCustomRenderExampleCode },
React.createElement(Persona_CustomRender_Example_1.PersonaCustomRenderExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use XXS size Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations."),
React.createElement("li", null, "Use XS size Persona in text fields in edit mode."),
React.createElement("li", null, "Use XS, S and M size Personas in menus and list views."),
React.createElement("li", null, "Use L and XXL size Personas in profile cards and views."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Change the values of the color swatches in high contrast mode. "))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Persona/Persona.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PersonaPage;
}(React.Component));
exports.PersonaPage = PersonaPage;
});
//# sourceMappingURL=PersonaPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 2 1 | define(["require", "exports", "./Persona", "./Persona.Props", "./PersonaConsts"], function (require, exports, Persona_1, Persona_Props_1, PersonaConsts_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Persona_1); __export(Persona_Props_1); __export(PersonaConsts_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Pivot.Props.js | 10% | (1 / 10) | 0% | (0 / 4) | 0% | (0 / 3) | 10% | (1 / 10) | |
| Pivot.js | 6.54% | (7 / 107) | 9.33% | (7 / 75) | 4.55% | (1 / 22) | 6.93% | (7 / 101) | |
| Pivot.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| PivotItem.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| PivotItem.js | 25% | (7 / 28) | 35% | (7 / 20) | 10% | (1 / 10) | 29.17% | (7 / 24) | |
| PivotPage.js | 20% | (6 / 30) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 22.22% | (6 / 27) | |
| index.js | 22.22% | (2 / 9) | 0% | (0 / 2) | 0% | (0 / 2) | 28.57% | (2 / 7) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var PivotLinkFormat; (function (PivotLinkFormat) { /** * Display Pivot Links as links */ PivotLinkFormat[PivotLinkFormat["links"] = 0] = "links"; /** * Display Pivot Links as Tabs */ PivotLinkFormat[PivotLinkFormat["tabs"] = 1] = "tabs"; })(PivotLinkFormat = exports.PivotLinkFormat || (exports.PivotLinkFormat = {})); var PivotLinkSize; (function (PivotLinkSize) { /** * Display Link using normal font size */ PivotLinkSize[PivotLinkSize["normal"] = 0] = "normal"; /** * Display links using large font size */ PivotLinkSize[PivotLinkSize["large"] = 1] = "large"; })(PivotLinkSize = exports.PivotLinkSize || (exports.PivotLinkSize = {})); }); //# sourceMappingURL=Pivot.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Button", "../../FocusZone", "./PivotItem", "./Pivot.Props", "./Pivot.Props", "./Pivot.scss"], function (require, exports, React, Utilities_1, Button_1, FocusZone_1, PivotItem_1, Pivot_Props_1, Pivot_Props_2, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Pivot = (function (_super) {
__extends(Pivot, _super);
function Pivot(props) {
var _this = _super.call(this, props) || this;
_this._pivotId = Utilities_1.getId('Pivot');
var links = _this._getPivotLinks(_this.props);
var selectedKey;
if (props.initialSelectedKey) {
selectedKey = props.initialSelectedKey;
}
else if (props.initialSelectedIndex) {
selectedKey = links[props.initialSelectedIndex].itemKey;
}
else if (props.selectedKey) {
selectedKey = props.selectedKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
_this.state = {
links: links,
selectedKey: selectedKey,
selectedTabId: _this._keyToTabIds[selectedKey],
};
_this._renderLink = _this._renderLink.bind(_this);
return _this;
}
Pivot.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var links = this._getPivotLinks(nextProps);
this.setState(function (prevState, props) {
var selectedKey;
if (_this._isKeyValid(nextProps.selectedKey)) {
selectedKey = nextProps.selectedKey;
}
else if (_this._isKeyValid(prevState.selectedKey)) {
selectedKey = prevState.selectedKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
return {
links: links,
selectedKey: selectedKey,
selectedTabId: _this._keyToTabIds[selectedKey],
};
});
};
Pivot.prototype.render = function () {
return (React.createElement("div", null,
this._renderPivotLinks(),
this._renderPivotItem()));
};
/**
* Renders the set of links to route between pivots
*/
Pivot.prototype._renderPivotLinks = function () {
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement("ul", { className: Utilities_1.css('ms-Pivot', styles.root, (_a = {}, _a['ms-Pivot--large ' + styles.rootIsLarge] = this.props.linkSize === Pivot_Props_2.PivotLinkSize.large, _a), (_b = {}, _b['ms-Pivot--tabs ' + styles.rootIsTabs] = this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs, _b)), role: 'tablist' }, this.state.links.map(this._renderLink))));
var _a, _b;
};
/**
* Renders a pivot link
*/
Pivot.prototype._renderLink = function (link) {
var itemKey = link.itemKey;
var tabId = this._keyToTabIds[itemKey];
var onRenderItemLink = link.onRenderItemLink;
var linkContent;
if (onRenderItemLink) {
linkContent = onRenderItemLink(link, this._renderLinkContent);
}
else {
linkContent = this._renderLinkContent(link);
}
return (React.createElement(Button_1.CommandButton, { id: tabId, key: itemKey, className: Utilities_1.css('ms-Pivot-link', styles.link, (_a = {},
_a['is-selected ' + styles.linkIsSelected] = this.state.selectedKey === itemKey,
_a)), onClick: this._onLinkClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), ariaLabel: link.ariaLabel, role: 'tab', "aria-selected": this.state.selectedKey === itemKey }, linkContent));
var _a;
};
Pivot.prototype._renderLinkContent = function (link) {
var itemCount = link.itemCount, itemIcon = link.itemIcon, linkText = link.linkText;
return React.createElement("span", { className: Utilities_1.css('ms-Pivot-link-content') },
itemIcon !== undefined && (React.createElement("span", { className: Utilities_1.css('ms-Pivot-icon', styles.icon) },
React.createElement("i", { className: "ms-Icon ms-Icon--" + itemIcon }))),
linkText !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-text', styles.text) },
" ",
link.linkText),
itemCount !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-count', styles.count) },
" (",
itemCount,
")"));
};
/**
* Renders the current Pivot Item
*/
Pivot.prototype._renderPivotItem = function () {
var itemKey = this.state.selectedKey;
var index = this._keyToIndexMapping[itemKey];
var selectedTabId = this.state.selectedTabId;
return (React.createElement("div", { role: 'tabpanel', "aria-labelledby": selectedTabId }, React.Children.toArray(this.props.children)[index]));
};
/**
* Gets the set of PivotLinks as arrary of IPivotItemProps
* The set of Links is determined by child components of type PivotItem
*/
Pivot.prototype._getPivotLinks = function (props) {
var _this = this;
var links = [];
this._keyToIndexMapping = {};
this._keyToTabIds = {};
React.Children.map(props.children, function (child, index) {
if (typeof child === 'object' && child.type === PivotItem_1.PivotItem) {
var pivotItem = child;
var itemKey = pivotItem.props.itemKey || index.toString();
links.push({
linkText: pivotItem.props.linkText,
ariaLabel: pivotItem.props.ariaLabel,
itemKey: itemKey,
itemCount: pivotItem.props.itemCount,
itemIcon: pivotItem.props.itemIcon,
onRenderItemLink: pivotItem.props.onRenderItemLink
});
_this._keyToIndexMapping[itemKey] = index;
_this._keyToTabIds[itemKey] = _this._pivotId + ("-Tab" + index);
}
});
return links;
};
/**
* whether the key exists in the pivot items.
*/
Pivot.prototype._isKeyValid = function (itemKey) {
return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
};
/**
* Handles the onClick event on PivotLinks
*/
Pivot.prototype._onLinkClick = function (itemKey, ev) {
ev.preventDefault();
this._updateSelectedItem(itemKey, ev);
};
/**
* Handle the onKeyPress eventon the PivotLinks
*/
Pivot.prototype._onKeyPress = function (itemKey, ev) {
ev.preventDefault();
if (ev.which === Utilities_1.KeyCodes.enter) {
this._updateSelectedItem(itemKey);
}
};
/**
* Updates the state with the new selected index
*/
Pivot.prototype._updateSelectedItem = function (itemKey, ev) {
this.setState({
selectedKey: itemKey,
selectedTabId: this._keyToTabIds[itemKey]
});
if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
var index = this._keyToIndexMapping[itemKey];
// React.Element<any> cannot directly convert to PivotItem.
var item = React.Children.toArray(this.props.children)[index];
if (typeof item === 'object' && item.type === PivotItem_1.PivotItem) {
this.props.onLinkClick(item, ev);
}
}
};
return Pivot;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], Pivot.prototype, "_renderLink", null);
__decorate([
Utilities_1.autobind
], Pivot.prototype, "_renderLinkContent", null);
exports.Pivot = Pivot;
});
//# sourceMappingURL=Pivot.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_a22d1d8d', links: 'links_a22d1d8d', link: 'link_a22d1d8d', text: 'text_a22d1d8d', count: 'count_a22d1d8d', icon: 'icon_a22d1d8d', linkIsSelected: 'linkIsSelected_a22d1d8d', linkIsDisabled: 'linkIsDisabled_a22d1d8d', linkIsOverflow: 'linkIsOverflow_a22d1d8d', ellipsis: 'ellipsis_a22d1d8d', rootIsLarge: 'rootIsLarge_a22d1d8d', rootIsTabs: 'rootIsTabs_a22d1d8d', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_a22d1d8d{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400;position:relative;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";white-space:nowrap}.links_a22d1d8d{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.link_a22d1d8d{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;font-size:14px;font-weight:400;line-height:40px;padding:0 8px;text-align:center;position:relative;background-color:transparent;border:0}html[dir=ltr] .link_a22d1d8d{margin-right:8px}html[dir=rtl] .link_a22d1d8d{margin-left:8px}.link_a22d1d8d:hover{cursor:pointer}.link_a22d1d8d:focus{outline:0}.link_a22d1d8d::before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color 267ms cubic-bezier(.1,.25,.75,.9)}.link_a22d1d8d::after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.link_a22d1d8d .count_a22d1d8d,.link_a22d1d8d .text_a22d1d8d{display:inline-block;vertical-align:top}html[dir=ltr] .link_a22d1d8d .icon_a22d1d8d+.text_a22d1d8d{margin-left:4px}html[dir=rtl] .link_a22d1d8d .icon_a22d1d8d+.text_a22d1d8d{margin-right:4px}html[dir=ltr] .link_a22d1d8d .count_a22d1d8d{margin-left:4px}html[dir=rtl] .link_a22d1d8d .count_a22d1d8d{margin-right:4px}.link_a22d1d8d.linkIsSelected_a22d1d8d{font-weight:600}.link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.link_a22d1d8d.linkIsDisabled_a22d1d8d{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.ms-Fabric.is-focusVisible .link_a22d1d8d:focus{outline:1px solid " }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d.linkIsSelected_a22d1d8d{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d:focus:not(.linkIsSelected_a22d1d8d),.link_a22d1d8d.linkIsOverflow_a22d1d8d:hover:not(.linkIsSelected_a22d1d8d){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ellipsis_a22d1d8d{font-size:15px;position:relative;top:0}.root_a22d1d8d.rootIsLarge_a22d1d8d .link_a22d1d8d{font-size:17px}.root_a22d1d8d.rootIsLarge_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d::after{font-size:17px}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{height:40px;line-height:40px;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";padding:0 10px;vertical-align:top}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d::-moz-focus-inner{border:0}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{margin-right:0}html[dir=rtl] .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{margin-left:0}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:focus:not(.linkIsSelected_a22d1d8d):not(.linkIsOverflow_a22d1d8d),.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:hover:not(.linkIsSelected_a22d1d8d):not(.linkIsOverflow_a22d1d8d){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:active{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:transparent;transition:none;position:absolute;top:0;left:0;right:0;bottom:0;content:'';height:auto}@media screen and (-ms-high-contrast:active){.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d::before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d::before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d:focus:not(.linkIsSelected_a22d1d8d),.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d:hover:not(.linkIsSelected_a22d1d8d){background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ms-Fabric.is-focusVisible .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:focus:before{height:auto;background:0 0;transition:none}@media screen and (-ms-high-contrast:active){.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d{font-weight:600}}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Pivot.scss.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=PivotItem.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PivotItem = (function (_super) {
__extends(PivotItem, _super);
function PivotItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
PivotItem.prototype.render = function () {
return (React.createElement("div", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)), this.props.children));
};
return PivotItem;
}(Utilities_1.BaseComponent));
exports.PivotItem = PivotItem;
});
//# sourceMappingURL=PivotItem.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Pivot.Basic.Example", "./examples/Pivot.IconCount.Example", "./examples/Pivot.Large.Example", "./examples/Pivot.Tabs.Example", "./examples/Pivot.TabsLarge.Example", "./examples/Pivot.Fabric.Example", "./examples/Pivot.OnChange.Example", "./examples/Pivot.Remove.Example", "./examples/Pivot.Override.Example"], function (require, exports, React, example_app_base_1, Pivot_Basic_Example_1, Pivot_IconCount_Example_1, Pivot_Large_Example_1, Pivot_Tabs_Example_1, Pivot_TabsLarge_Example_1, Pivot_Fabric_Example_1, Pivot_OnChange_Example_1, Pivot_Remove_Example_1, Pivot_Override_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PivotRemoveExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx');
var PivotBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx');
var PivotLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx');
var PivotTabsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx');
var PivotTabsLargesExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx');
var PivotFabricExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx');
var PivotOnChangeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx');
var PivotIconCountExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx');
var PivotOverrideExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx');
var PivotPage = (function (_super) {
__extends(PivotPage, _super);
function PivotPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PivotPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Pivot', componentName: 'PivotExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic example', code: PivotBasicExampleCode },
React.createElement(Pivot_Basic_Example_1.PivotBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Count and Icon', code: PivotIconCountExampleCode },
React.createElement(Pivot_IconCount_Example_1.PivotIconCountExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Large link size', code: PivotLargeExampleCode },
React.createElement(Pivot_Large_Example_1.PivotLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Links of tab style', code: PivotTabsExampleCode },
React.createElement(Pivot_Tabs_Example_1.PivotTabsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Links of large tab style', code: PivotTabsLargesExampleCode },
React.createElement(Pivot_TabsLarge_Example_1.PivotTabsLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Trigger onchange event', code: PivotOnChangeExampleCode },
React.createElement(Pivot_OnChange_Example_1.PivotOnChangeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering nested components within the Pivot', code: PivotFabricExampleCode },
React.createElement(Pivot_Fabric_Example_1.PivotFabricExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Show/Hide pivot item', code: PivotRemoveExampleCode },
React.createElement(Pivot_Remove_Example_1.PivotRemoveExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Override selected item', code: PivotOverrideExampleCode },
React.createElement(Pivot_Override_Example_1.PivotOverrideExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content."),
React.createElement("ul", null,
React.createElement("li", null, "Tapping on a pivot item header navigates to that header's section content."),
React.createElement("li", null, "Swiping left or right on a pivot item header navigates to the adjacent section."),
React.createElement("li", null, "Swiping left or right on section content navigates to the adjacent section. "),
React.createElement("li", null, "Pivots are stationary when all pivot headers fit within the allowed space."),
React.createElement("li", null, "Pivots carousel when all pivot headers don't fit within the allowed space.")),
React.createElement("p", null, "Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use on content-heavy pages that require a significant amount of scrolling to access the various sections."),
React.createElement("li", null, "Be concise on the navigation labels, ideally one or two words rather than a phrase."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use on pages which doesn\u2019t scroll."),
React.createElement("li", null, "Don\u2019t use the Pivot to link to a new page."),
React.createElement("li", null, "Don\u2019t use the Pivot to link to hidden content."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Pivot/Pivot.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PivotPage;
}(React.Component));
exports.PivotPage = PivotPage;
});
//# sourceMappingURL=PivotPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 2 1 | define(["require", "exports", "./Pivot", "./PivotItem", "./Pivot.Props"], function (require, exports, Pivot_1, PivotItem_1, Pivot_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Pivot_1); exports.PivotItem = PivotItem_1.PivotItem; __export(Pivot_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Popup.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Popup.js | 13.11% | (8 / 61) | 18.18% | (10 / 55) | 5.88% | (1 / 17) | 14.81% | (8 / 54) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Popup.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* This adds accessibility to Dialog and Panel controls
*/
var Popup = (function (_super) {
__extends(Popup, _super);
function Popup() {
return _super !== null && _super.apply(this, arguments) || this;
}
Popup.prototype.componentWillMount = function () {
this._originalFocusedElement = Utilities_1.getDocument().activeElement;
};
Popup.prototype.componentDidMount = function () {
this._events.on(this.refs.root, 'focus', this._onFocus, true);
this._events.on(this.refs.root, 'blur', this._onBlur, true);
if (Utilities_1.doesElementContainFocus(this.refs.root)) {
this._containsFocus = true;
}
};
Popup.prototype.componentWillUnmount = function () {
if (this.props.shouldRestoreFocus &&
this._originalFocusedElement &&
this._containsFocus &&
this._originalFocusedElement !== window) {
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
// to reset the focus back to the thing it thinks should have been focused.
if (this._originalFocusedElement) {
this._originalFocusedElement.focus();
}
}
};
Popup.prototype.render = function () {
var _a = this.props, role = _a.role, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
return (React.createElement("div", __assign({ ref: 'root' }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: className, role: role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown }), this.props.children));
};
Popup.prototype._onKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.escape:
if (this.props.onDismiss) {
this.props.onDismiss(ev);
ev.preventDefault();
ev.stopPropagation();
}
break;
}
};
Popup.prototype._onFocus = function () {
this._containsFocus = true;
};
Popup.prototype._onBlur = function () {
this._containsFocus = false;
};
return Popup;
}(Utilities_1.BaseComponent));
Popup.defaultProps = {
shouldRestoreFocus: true
};
__decorate([
Utilities_1.autobind
], Popup.prototype, "_onKeyDown", null);
exports.Popup = Popup;
});
//# sourceMappingURL=Popup.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Popup"], function (require, exports, Popup_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Popup_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ProgressIndicator.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| ProgressIndicator.js | 20.69% | (6 / 29) | 26.67% | (4 / 15) | 11.11% | (1 / 9) | 23.08% | (6 / 26) | |
| ProgressIndicator.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| ProgressIndicatorPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=ProgressIndicator.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./ProgressIndicator.scss"], function (require, exports, React, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// if the percentComplete is near 0, don't animate it.
// This prevents animations on reset to 0 scenarios
var ZERO_THRESHOLD = 0.01;
var ProgressIndicator = (function (_super) {
__extends(ProgressIndicator, _super);
function ProgressIndicator(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
title: 'label'
});
return _this;
}
ProgressIndicator.prototype.render = function () {
var _a = this.props, title = _a.title, label = _a.label, description = _a.description, percentComplete = _a.percentComplete, className = _a.className, ariaValueText = _a.ariaValueText;
// Handle deprecated value.
if (title) {
label = title;
}
percentComplete = Math.min(100, Math.max(0, percentComplete * 100));
return (React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator', styles.root, className) },
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemName', styles.itemName) }, label),
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemProgress', styles.itemProgress) },
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressTrack', styles.progressTrack) }),
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressBar', styles.progressBar, {
'smoothTransition': percentComplete > ZERO_THRESHOLD
}), style: { width: percentComplete + '%' }, role: 'progressbar', "aria-valuemin": '0', "aria-valuemax": '100', "aria-valuenow": percentComplete.toFixed().toString(), "aria-valuetext": ariaValueText })),
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }, description)));
};
return ProgressIndicator;
}(Utilities_1.BaseComponent));
ProgressIndicator.defaultProps = {
label: '',
description: '',
percentComplete: 0,
width: 180
};
exports.ProgressIndicator = ProgressIndicator;
});
//# sourceMappingURL=ProgressIndicator.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_bd79c24d', itemName: 'itemName_bd79c24d', itemDescription: 'itemDescription_bd79c24d', itemProgress: 'itemProgress_bd79c24d', progressTrack: 'progressTrack_bd79c24d', progressBar: 'progressBar_bd79c24d', smoothTransition: 'smoothTransition_bd79c24d', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_bd79c24d{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.itemName_bd79c24d{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.itemDescription_bd79c24d{color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:11px;line-height:18px}.itemProgress_bd79c24d{position:relative;height:2px;padding:8px 0}.progressTrack_bd79c24d{position:absolute;width:100%;height:2px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";outline:1px solid transparent}.progressBar_bd79c24d{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.progressBar_bd79c24d{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.progressBar_bd79c24d{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.smoothTransition_bd79c24d{transition-property:width;transition-timing-function:linear;transition-duration:150ms}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ProgressIndicator.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/ProgressIndicator.Basic.Example"], function (require, exports, React, example_app_base_1, ProgressIndicator_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ProgressIndicatorBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Basic.Example.tsx');
var ProgressIndicatorPage = (function (_super) {
__extends(ProgressIndicatorPage, _super);
function ProgressIndicatorPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ProgressIndicatorPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ProgressIndicator', componentName: 'ProgressIndicatorExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'ProgressIndicator', code: ProgressIndicatorBasicExampleCode },
React.createElement(ProgressIndicator_Basic_Example_1.ProgressIndicatorBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "ProgressIndicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped."),
React.createElement("p", null, "ProgressIndicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include:"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("strong", null, "[Object]"),
" is being ",
React.createElement("strong", null, "[operation name]"),
", or"),
React.createElement("li", null,
React.createElement("strong", null, "[Object]"),
" is being ",
React.createElement("strong", null, "[operation name]"),
" to ",
React.createElement("strong", null, "[destination name]"),
" or"),
React.createElement("li", null,
React.createElement("strong", null, "[Object]"),
" is being ",
React.createElement("strong", null, "[operation name]"),
" from ",
React.createElement("strong", null, "[source name]"),
" to ",
React.createElement("strong", null, "[destination name]"))),
React.createElement("p", null, "Status text is generally in units elapsed and total units. If the operation can be canceled, an \u201CX\u201D icon is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark."),
React.createElement("p", null, "Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201Crewinding\u201D the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a ProgressIndicator when the total units to completion is known"),
React.createElement("li", null, "Display operation description"),
React.createElement("li", null, "Show text above and/or below the bar"),
React.createElement("li", null, "Combine steps of a single operation into one bar"))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a ProgressIndicator when the total units to completion is indeterminate"),
React.createElement("li", null, "Use only a single word description"),
React.createElement("li", null, "Show text to the right or left of the bar"),
React.createElement("li", null, "Cause progress to \u201Crewind\u201D to show new steps"))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/ProgressIndicator/ProgressIndicator.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ProgressIndicatorPage;
}(React.Component));
exports.ProgressIndicatorPage = ProgressIndicatorPage;
});
//# sourceMappingURL=ProgressIndicatorPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./ProgressIndicator"], function (require, exports, ProgressIndicator_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(ProgressIndicator_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Rating.Props.js | 16.67% | (1 / 6) | 0% | (0 / 2) | 0% | (0 / 2) | 16.67% | (1 / 6) | |
| Rating.js | 10% | (6 / 60) | 14.81% | (4 / 27) | 5.56% | (1 / 18) | 10.53% | (6 / 57) | |
| Rating.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| RatingPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var RatingSize; (function (RatingSize) { RatingSize[RatingSize["Small"] = 0] = "Small"; RatingSize[RatingSize["Large"] = 1] = "Large"; })(RatingSize = exports.RatingSize || (exports.RatingSize = {})); }); //# sourceMappingURL=Rating.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./Rating.Props", "./Rating.scss"], function (require, exports, React, Utilities_1, Rating_Props_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Rating = (function (_super) {
__extends(Rating, _super);
function Rating(props) {
var _this = _super.call(this, props) || this;
_this.state = {
rating: _this._getInitialValue(props),
focusedRating: null
};
_this._id = Utilities_1.getId('Rating');
_this._labelId = Utilities_1.getId('RatingLabel');
return _this;
}
Rating.prototype.componentWillReceiveProps = function (nextProps) {
if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
this.setState({
rating: this._getClampedRating(nextProps.rating)
});
}
};
Rating.prototype.render = function () {
var stars = [];
for (var i = this.props.min; i <= this.props.max; ++i) {
stars.push(this._renderStar(i));
}
return React.createElement("div", { className: Utilities_1.css('ms-Rating', this.props.className, (_a = {},
_a['ms-Rating--large ' + styles.rootIsLarge] = this.props.size === Rating_Props_1.RatingSize.Large,
_a)), role: 'application' },
React.createElement("div", { className: Utilities_1.css('ms-Rating-container', styles.container), role: 'radiogroup', "aria-labelledby": this.props.ariaLabelId }, stars));
var _a;
};
Rating.prototype._renderStar = function (rating) {
var inputId = this._id + "-" + rating;
return React.createElement("div", { className: Utilities_1.css('ms-Rating-star', styles.star, (_a = {},
_a['is-selected ' + styles.starIsSelected] = rating <= this.state.rating,
_a['is-inFocus ' + styles.starIsInFocus] = rating === this.state.focusedRating,
_a['is-disabled ' + styles.starIsDisabled] = this.props.disabled,
_a)), key: rating },
React.createElement("input", { className: Utilities_1.css('ms-Rating-input', styles.input), type: 'radio', name: this._id, id: inputId, value: rating, "aria-labelledby": this._labelId + "-" + rating, disabled: this.props.disabled, checked: rating === this.state.rating, onChange: this._onChange.bind(this, rating), onFocus: this._onFocus.bind(this, rating), onBlur: this._onBlur.bind(this, rating) }),
React.createElement("label", { className: Utilities_1.css('ms-Rating-label', styles.label), htmlFor: inputId },
this._getLabel(rating),
this._getIcon()));
var _a;
};
Rating.prototype._onFocus = function (value, ev) {
this.setState({
focusedRating: value
});
};
Rating.prototype._onBlur = function (option, ev) {
this.setState({
focusedRating: null
});
};
Rating.prototype._onChange = function (rating, evt) {
this.setState({
rating: rating
});
var onChanged = this.props.onChanged;
if (onChanged) {
onChanged(rating);
}
};
Rating.prototype._getLabel = function (rating) {
var text = this.props.ariaLabelIcon || 'Star';
return (React.createElement("span", { id: this._labelId + "-" + rating, className: Utilities_1.css('ms-Rating-labelText', styles.labelText) }, rating + " " + text));
};
Rating.prototype._getIcon = function () {
return React.createElement("i", { className: Utilities_1.css('ms-Icon', this.props.icon || 'ms-Icon--FavoriteStarFill') });
};
Rating.prototype._getInitialValue = function (props) {
if (typeof props.rating === 'undefined') {
return props.min;
}
if (props.rating === null) {
return null;
}
return this._getClampedRating(props.rating);
};
Rating.prototype._getClampedRating = function (rating) {
rating = Math.floor(rating);
return Math.min(Math.max(rating, this.props.min), this.props.max);
};
return Rating;
}(Utilities_1.BaseComponent));
Rating.defaultProps = {
min: 1,
max: 5
};
exports.Rating = Rating;
});
//# sourceMappingURL=Rating.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { input: 'input_7b9b7f98', container: 'container_7b9b7f98', star: 'star_7b9b7f98', starIsDisabled: 'starIsDisabled_7b9b7f98', starIsSelected: 'starIsSelected_7b9b7f98', label: 'label_7b9b7f98', rootIsLarge: 'rootIsLarge_7b9b7f98', labelText: 'labelText_7b9b7f98', starIsInFocus: 'starIsInFocus_7b9b7f98', }; load_themed_styles_1.loadStyles([{ "rawString": ".input_7b9b7f98{position:absolute;opacity:0;top:0}.container_7b9b7f98{position:relative;display:inline-block}.container_7b9b7f98:hover .star_7b9b7f98:not(.starIsDisabled_7b9b7f98){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_7b9b7f98:hover .star_7b9b7f98:not(.starIsDisabled_7b9b7f98).star_7b9b7f98:hover{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.container_7b9b7f98:hover .star_7b9b7f98:not(.starIsDisabled_7b9b7f98).star_7b9b7f98:hover~.star_7b9b7f98{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98{display:inline-block;text-align:center;color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98.starIsSelected_7b9b7f98{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98.starIsDisabled_7b9b7f98{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98.starIsDisabled_7b9b7f98 .label_7b9b7f98{cursor:default}.container_7b9b7f98 .star_7b9b7f98 .label_7b9b7f98{display:inline-block;cursor:pointer;font-size:16px;padding:12px 0;border:1px solid transparent}.rootIsLarge_7b9b7f98 .container_7b9b7f98 .label_7b9b7f98{font-size:20px;padding:6px 2px 9px 2px}.labelText_7b9b7f98{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-Fabric.is-focusVisible .starIsInFocus_7b9b7f98 .label_7b9b7f98{border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Rating.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Rating.Basic.Example"], function (require, exports, React, example_app_base_1, Rating_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RatingBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx');
var RatingPage = (function (_super) {
__extends(RatingPage, _super);
function RatingPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
RatingPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Rating', componentName: 'RatingExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Rating', code: RatingBasicExampleCode },
React.createElement(Rating_Basic_Example_1.RatingBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Rating/Rating.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Ratings provide insight regarding others\u2019 opinions and experiences with a product, helping users make more-informed purchasing decisions. Users can also rate products they\u2019ve purchased.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Make it clear which product the rating pertains to by making sure the layout and grouping are clear when several products are on the page."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use the rating component for data that has a continuous range, such as the brightness of a photo. Instead, use a slider."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return RatingPage;
}(React.Component));
exports.RatingPage = RatingPage;
});
//# sourceMappingURL=RatingPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Rating", "./Rating.Props"], function (require, exports, Rating_1, Rating_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Rating_1); __export(Rating_Props_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| SearchBox.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| SearchBox.js | 9.52% | (8 / 84) | 16.67% | (10 / 60) | 5.26% | (1 / 19) | 10.39% | (8 / 77) | |
| SearchBox.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| SearchBoxPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=SearchBox.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Icon", "./SearchBox.scss"], function (require, exports, React, Utilities_1, Icon_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SearchBox = (function (_super) {
__extends(SearchBox, _super);
function SearchBox(props) {
var _this = _super.call(this, props) || this;
_this.state = {
value: props.value || '',
hasFocus: false,
id: Utilities_1.getId('SearchBox')
};
return _this;
}
SearchBox.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
this.setState({
value: newProps.value
});
}
};
SearchBox.prototype.render = function () {
var _a = this.props, labelText = _a.labelText, className = _a.className;
var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
return (React.createElement("div", __assign({ ref: this._resolveRef('_rootElement'), className: Utilities_1.css('ms-SearchBox', className, styles.root, (_c = {},
_c['is-active ' + styles.rootIsActive] = hasFocus,
_c['can-clear ' + styles.rootCanClear] = value.length > 0,
_c)) }, { onFocusCapture: this._onFocusCapture }),
React.createElement("div", { className: Utilities_1.css('ms-SearchBox-iconContainer', styles.iconContainer) },
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-SearchBox-icon', styles.icon), iconName: 'Search' })),
React.createElement("input", { id: id, className: Utilities_1.css('ms-SearchBox-field', styles.field), placeholder: labelText, onChange: this._onInputChange, onKeyDown: this._onKeyDown, value: value, ref: this._resolveRef('_inputElement') }),
React.createElement("div", { className: Utilities_1.css('ms-SearchBox-clearButton', styles.clearButton), onClick: this._onClearClick },
React.createElement(Icon_1.Icon, { iconName: 'Clear' }))));
var _c;
};
/**
* Sets focus to the search box input field
*/
SearchBox.prototype.focus = function () {
if (this._inputElement) {
this._inputElement.focus();
}
};
SearchBox.prototype._onClearClick = function (ev) {
this.setState({
value: ''
});
this._callOnChange('');
ev.stopPropagation();
ev.preventDefault();
this._inputElement.focus();
};
SearchBox.prototype._onFocusCapture = function (ev) {
this.setState({
hasFocus: true
});
this._events.on(Utilities_1.getDocument().body, 'focus', this._handleDocumentFocus, true);
};
SearchBox.prototype._onKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.escape:
this._onClearClick(ev);
break;
case Utilities_1.KeyCodes.enter:
if (this.props.onSearch && this.state.value.length > 0) {
this.props.onSearch(this.state.value);
}
break;
default:
return;
}
// We only get here if the keypress has been handled.
ev.preventDefault();
ev.stopPropagation();
};
SearchBox.prototype._onInputChange = function (ev) {
this.setState({
value: this._inputElement.value
});
this._callOnChange(this._inputElement.value);
};
SearchBox.prototype._handleDocumentFocus = function (ev) {
if (!Utilities_1.elementContains(this._rootElement, ev.target)) {
this._events.off(Utilities_1.getDocument().body, 'focus');
this.setState({
hasFocus: false
});
}
};
SearchBox.prototype._callOnChange = function (newValue) {
var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
// Call @deprecated method.
if (onChanged) {
onChanged(newValue);
}
if (onChange) {
onChange(newValue);
}
};
return SearchBox;
}(Utilities_1.BaseComponent));
SearchBox.defaultProps = {
labelText: 'Search',
};
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onClearClick", null);
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onFocusCapture", null);
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onKeyDown", null);
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onInputChange", null);
exports.SearchBox = SearchBox;
});
//# sourceMappingURL=SearchBox.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_14897739', iconContainer: 'iconContainer_14897739', icon: 'icon_14897739', field: 'field_14897739', clearButton: 'clearButton_14897739', label: 'label_14897739', rootIsActive: 'rootIsActive_14897739', rootIsDisabled: 'rootIsDisabled_14897739', rootCanClear: 'rootCanClear_14897739', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_14897739{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-bottom:10px;padding:0 0 0 8px;border:1px solid " }, { "theme": "themeTertiary", "defaultValue": "#71afe5" }, { "rawString": ";height:32px}html[dir=rtl] .root_14897739{padding:0 8px 0 0}.iconContainer_14897739{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:16px;width:32px;text-align:center;transition:width 167ms;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.icon_14897739{opacity:1;transition:opacity 167ms 0s}.field_14897739{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:none;outline:transparent 1px solid;font-weight:inherit;font-family:inherit;font-size:inherit;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:transparent;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;text-overflow:ellipsis;padding-bottom:.5px}.field_14897739::-ms-clear{display:none}.clearButton_14897739{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none;cursor:pointer;text-align:center;font-size:12px;-ms-flex-preferred-size:32px;flex-basis:32px;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_14897739:hover .field_14897739{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.root_14897739:hover .label_14897739{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_14897739:hover .label_14897739 .iconContainer_14897739{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_14897739{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_14897739 .iconContainer_14897739{width:4px;transition:width 167ms}.rootIsActive_14897739 .icon_14897739{opacity:0;opacity:0 0s 167ms}.rootIsDisabled_14897739{border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsDisabled_14897739 .iconContainer_14897739{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_14897739 .field_14897739{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.rootCanClear_14897739 .clearButton_14897739{display:-webkit-box;display:-ms-flexbox;display:flex}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=SearchBox.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/SearchBox.Small.Example", "./examples/SearchBox.FullSize.Example"], function (require, exports, React, example_app_base_1, SearchBox_Small_Example_1, SearchBox_FullSize_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SearchBoxSmallExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx');
var SearchBoxFullSizeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx');
var SearchBoxPage = (function (_super) {
__extends(SearchBoxPage, _super);
function SearchBoxPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SearchBoxPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'SearchBox', componentName: 'SearchBoxExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'SearchBox', code: SearchBoxSmallExampleCode },
React.createElement(SearchBox_Small_Example_1.SearchBoxSmallExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'SearchBox - No Parent Container', code: SearchBoxFullSizeExampleCode },
React.createElement(SearchBox_FullSize_Example_1.SearchBoxFullSizeExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/SearchBox.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app."),
React.createElement("h2", { className: 'ms-font-xl' }, "Zero input state "),
React.createElement("p", null, "When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display \"hint text\" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include \"type to search\", \"try searching for <x>\", \"search for a place\" or \"type to search in <x location>\"."),
React.createElement("h2", { className: 'ms-font-xl' }, "Autocomplete suggestions"),
React.createElement("p", null, "As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse."),
React.createElement("h2", { className: 'ms-font-xl' }, "Full search"),
React.createElement("p", null, "If a user hits \"enter\" after entering input, a full search is executed. Full searches often go to another \"results\" page, or change/filter the content of the current page to show only applicable content. The results can appear in any form that best communicates the content."),
React.createElement("p", null, "As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string."),
React.createElement("h2", { className: 'ms-font-xl' }, "Search scopes"),
React.createElement("p", null, "Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched."),
React.createElement("p", null, "Some common search scopes include:"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("strong", null, "Global:"),
" Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more."),
React.createElement("li", null,
React.createElement("strong", null, "Web:"),
" Search a web index. Results include pages, entities, and answers."),
React.createElement("li", null,
React.createElement("strong", null, "My stuff:"),
" Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).")),
React.createElement("h2", { className: 'ms-font-xl' }, "SearchBox with no parent container"),
React.createElement("p", null, "Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use placeholder text in the SearchBox to describe what users can search for."),
React.createElement("li", null, "Example: \"Search\"; \"Search files\"; \"Search site\""),
React.createElement("li", null, "Once the user has clicked into the SearchBox but hasn\u2019t entered input yet, use \"hint text\" to communicate search scope."),
React.createElement("li", null, "Examples: \"Try searching for a PDFs\"; \"Search contacts list\"; \"Type to find <content type>\""),
React.createElement("li", null, "Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user's query text."),
React.createElement("li", null, "Provide autocomplete suggestions where there are strong matches to the user's query that the user may want to view immediately."),
React.createElement("li", null, "Use a visual separator to define a group of a similar or conceptually aligned autocomplete suggestions."),
React.createElement("li", null, "If possible, provide a preview (e.g. image, title, etc.) for autocomplete suggestions to help the user quickly determine if the suggested result is what they were searching for."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't leave the SearchBox blank because it's too ambiguous."),
React.createElement("li", null, "Don't have lengthy and unclear hint text. It should be used to clarify and set expectations."),
React.createElement("li", null, "Don't provide too many autocomplete suggestions, as that will overwhelm the user."),
React.createElement("li", null, "Don't provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration."),
React.createElement("li", null, "Don\u2019t provide too much information or metadata in the suggestions list; it\u2019s intended to be lightweight."),
React.createElement("li", null, "Don\u2019t use an autocomplete dropdown for something that has one choice; there must be more than one item."),
React.createElement("li", null, "Don't build a custom search control based on the default text box or any other control."),
React.createElement("li", null, "Don't use SearchBox if you cannot reliably provide accurate results."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/SearchBox/SearchBox.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return SearchBoxPage;
}(React.Component));
exports.SearchBoxPage = SearchBoxPage;
});
//# sourceMappingURL=SearchBoxPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./SearchBox"], function (require, exports, SearchBox_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(SearchBox_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Slider.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Slider.js | 6.45% | (8 / 124) | 10.1% | (10 / 99) | 4.76% | (1 / 21) | 6.84% | (8 / 117) | |
| Slider.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| SliderPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Slider.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Label", "./Slider.scss"], function (require, exports, React, Utilities_1, Label_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ValuePosition;
(function (ValuePosition) {
ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
ValuePosition[ValuePosition["Next"] = 1] = "Next";
})(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {}));
var Slider = (function (_super) {
__extends(Slider, _super);
function Slider(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'value': 'defaultValue'
});
_this._id = Utilities_1.getId('Slider');
var value = props.value || props.defaultValue || props.min;
_this.state = {
value: value,
renderedValue: value
};
return _this;
}
/**
* Invoked when a component is receiving new props. This method is not called for the initial render.
*/
Slider.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
var value = Math.max(newProps.min, Math.min(newProps.max, newProps.value));
this.setState({
value: value,
renderedValue: value
});
}
};
Slider.prototype.render = function () {
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, disabled = _a.disabled, label = _a.label, max = _a.max, min = _a.min, showValue = _a.showValue, buttonProps = _a.buttonProps;
var _b = this.state, value = _b.value, renderedValue = _b.renderedValue;
var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100;
var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown };
return (React.createElement("div", { className: Utilities_1.css('ms-Slider', styles.root, className, (_c = {},
_c['ms-Slider-enabled ' + styles.rootIsEnabled] = !disabled,
_c['ms-Slider-disabled ' + styles.rootIsDisabled] = disabled,
_c)), ref: 'root' },
label && (React.createElement(Label_1.Label, __assign({ className: styles.titleLabel }, ariaLabel ? {} : { 'htmlFor': this._id }), label)),
React.createElement("div", { className: Utilities_1.css('ms-Slider-container', styles.container) },
React.createElement("button", __assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, (_d = {
'ms-Slider-showValue': showValue
},
_d['ms-Slider-showTransitions ' + styles.showTransitions] = (renderedValue === value),
_d)), id: this._id, disabled: disabled, type: 'button', role: 'slider' }),
React.createElement("div", { ref: 'sliderLine', className: Utilities_1.css('ms-Slider-line', styles.line) },
React.createElement("span", __assign({ ref: 'thumb', className: Utilities_1.css('ms-Slider-thumb', styles.thumb) }, ariaLabel ? { 'aria-label': ariaLabel } : {}, { style: Utilities_1.getRTL() ?
{ 'right': thumbOffsetPercent + '%' } :
{ 'left': thumbOffsetPercent + '%' } })),
React.createElement("span", { className: Utilities_1.css('ms-Slider-active', styles.activeSection), style: { 'width': thumbOffsetPercent + '%' } }),
React.createElement("span", { className: Utilities_1.css('ms-Slider-inactive', styles.inactiveSection), style: { 'width': (100 - thumbOffsetPercent) + '%' } }))),
showValue && React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Slider-value', styles.valueLabel) }, value))));
var _c, _d;
};
Slider.prototype.focus = function () {
if (this.refs.thumb) {
this.refs.thumb.focus();
}
};
Object.defineProperty(Slider.prototype, "value", {
get: function () {
return this.state.value;
},
enumerable: true,
configurable: true
});
Slider.prototype._onMouseDownOrTouchStart = function (event) {
if (event.type === 'mousedown') {
this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true);
this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true);
}
else if (event.type === 'touchstart') {
this._events.on(window, 'touchmove', this._onMouseMoveOrTouchMove, true);
this._events.on(window, 'touchend', this._onMouseUpOrTouchEnd, true);
}
this._onMouseMoveOrTouchMove(event, true);
};
Slider.prototype._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
var steps = (max - min) / step;
var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect();
var sliderLength = sliderPositionRect.width;
var stepLength = sliderLength / steps;
var currentSteps;
if (event.type === 'mousedown' || event.type === 'mousemove') {
currentSteps = Utilities_1.getRTL() ?
(sliderPositionRect.right - event.clientX) / stepLength :
(event.clientX - sliderPositionRect.left) / stepLength;
}
else if (event.type === 'touchstart' || event.type === 'touchmove') {
currentSteps = Utilities_1.getRTL() ?
(sliderPositionRect.right - event.touches[0].clientX) / stepLength :
(event.touches[0].clientX - sliderPositionRect.left) / stepLength;
}
var currentValue;
var renderedValue;
// The value shouldn't be bigger than max or be smaller than min.
if (currentSteps > Math.floor(steps)) {
renderedValue = currentValue = max;
}
else if (currentSteps < 0) {
renderedValue = currentValue = min;
}
else {
renderedValue = min + step * currentSteps;
currentValue = min + step * Math.round(currentSteps);
}
this._updateValue(currentValue, renderedValue);
if (!suppressEventCancelation) {
event.preventDefault();
event.stopPropagation();
}
};
Slider.prototype._updateValue = function (value, renderedValue) {
var _this = this;
var valueChanged = value !== this.state.value;
this.setState({
value: value,
renderedValue: renderedValue
}, function () {
if (valueChanged && _this.props.onChange) {
_this.props.onChange(_this.state.value);
}
});
};
Slider.prototype._onMouseUpOrTouchEnd = function () {
// Synchronize the renderedValue to the actual value.
this.setState({
renderedValue: this.state.value
});
this._events.off();
};
Slider.prototype._onKeyDown = function (event) {
var value = this.state.value;
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
var diff = 0;
switch (event.which) {
case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left):
case Utilities_1.KeyCodes.down:
diff = -step;
break;
case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right):
case Utilities_1.KeyCodes.up:
diff = step;
break;
case Utilities_1.KeyCodes.home:
value = min;
break;
case Utilities_1.KeyCodes.end:
value = max;
break;
default:
return;
}
var newValue = Math.min(max, Math.max(min, value + diff));
this._updateValue(newValue, newValue);
event.preventDefault();
event.stopPropagation();
};
return Slider;
}(Utilities_1.BaseComponent));
Slider.defaultProps = {
step: 1,
min: 0,
max: 10,
showValue: true,
disabled: false,
buttonProps: {}
};
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseDownOrTouchStart", null);
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseMoveOrTouchMove", null);
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseUpOrTouchEnd", null);
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onKeyDown", null);
exports.Slider = Slider;
});
//# sourceMappingURL=Slider.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_2e1a26fc', titleLabel: 'titleLabel_2e1a26fc', line: 'line_2e1a26fc', activeSection: 'activeSection_2e1a26fc', inactiveSection: 'inactiveSection_2e1a26fc', showTransitions: 'showTransitions_2e1a26fc', thumb: 'thumb_2e1a26fc', slideBox: 'slideBox_2e1a26fc', container: 'container_2e1a26fc', valueLabel: 'valueLabel_2e1a26fc', rootIsEnabled: 'rootIsEnabled_2e1a26fc', rootIsDisabled: 'rootIsDisabled_2e1a26fc', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_2e1a26fc{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:8px}.titleLabel_2e1a26fc{padding:0}.line_2e1a26fc{position:relative;width:100%}.line_2e1a26fc span{height:4px;border-radius:4px}html[dir=ltr] .line_2e1a26fc span{float:left}html[dir=rtl] .line_2e1a26fc span{float:right}.activeSection_2e1a26fc{background:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.inactiveSection_2e1a26fc{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.showTransitions_2e1a26fc .thumb_2e1a26fc{transition:left 367ms cubic-bezier(.1,.9,.2,1)}.showTransitions_2e1a26fc .activeSection_2e1a26fc,.showTransitions_2e1a26fc .inactiveSection_2e1a26fc{transition:width 367ms cubic-bezier(.1,.9,.2,1)}.slideBox_2e1a26fc{background:0 0;border:none;padding:0;margin:0}.slideBox_2e1a26fc .thumb_2e1a26fc{border:2px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";display:block;width:16px;height:16px;position:absolute;top:-6px;border-radius:10px}html[dir=ltr] .slideBox_2e1a26fc .thumb_2e1a26fc{-webkit-transform:translateX(-50%);transform:translateX(-50%)}html[dir=rtl] .slideBox_2e1a26fc .thumb_2e1a26fc{-webkit-transform:translateX(50%);transform:translateX(50%)}.container_2e1a26fc{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.slideBox_2e1a26fc{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:28px;line-height:28px;padding:0 8px}.slideBox_2e1a26fc::-moz-focus-inner{border:0}.slideBox_2e1a26fc{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .slideBox_2e1a26fc:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.valueLabel_2e1a26fc{-ms-flex-negative:1;flex-shrink:1;width:30px;margin:0 8px;line-height:1}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .thumb_2e1a26fc,.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:hover .thumb_2e1a26fc{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .activeSection_2e1a26fc,.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:hover .activeSection_2e1a26fc{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .inactiveSection_2e1a26fc,.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:hover .inactiveSection_2e1a26fc{background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .thumb_2e1a26fc{border:2px solid " }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .activeSection_2e1a26fc{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.rootIsDisabled_2e1a26fc .thumb_2e1a26fc{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_2e1a26fc .activeSection_2e1a26fc{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_2e1a26fc .inactiveSection_2e1a26fc{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Slider.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Slider.Basic.Example"], function (require, exports, React, example_app_base_1, Slider_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SliderBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx');
var SliderPage = (function (_super) {
__extends(SliderPage, _super);
function SliderPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SliderPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Slider', componentName: 'SliderExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Slider', code: SliderBasicExampleCode },
React.createElement(Slider_Basic_Example_1.SliderBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Slider/Slider.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),
React.createElement("p", null, "A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium\u2014not about setting the value to two or five.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Consider a Slider when changing a value."),
React.createElement("li", null, "Use a slider when you want your users to be able to set defined values (such as volume or brightness)."),
React.createElement("li", null, "Include a label indicating what value the Slider changes."),
React.createElement("li", null, "Use step points (or tick marks) if you don\u2019t want the Slider to allow arbitrary values between min and max. "),
React.createElement("li", null, "Use a Slider when the user would benefit from instant feedback on the effect of setting changes. "))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use a Slider when the options are not values."),
React.createElement("li", null, "Don\u2019t use a Slider for binary settings."),
React.createElement("li", null, "Don\u2019t create a continuous Slider if the range of values is large."),
React.createElement("li", null, "Don\u2019t use for a range of three values or less."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return SliderPage;
}(React.Component));
exports.SliderPage = SliderPage;
});
//# sourceMappingURL=SliderPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Slider"], function (require, exports, Slider_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Slider_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Spinner.Props.js | 8.33% | (1 / 12) | 0% | (0 / 4) | 0% | (0 / 3) | 8.33% | (1 / 12) | |
| Spinner.js | 25% | (6 / 24) | 25% | (4 / 16) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| Spinner.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| SpinnerPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) | |
| interfaces.js | 8.33% | (1 / 12) | 0% | (0 / 4) | 0% | (0 / 3) | 8.33% | (1 / 12) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var SpinnerSize; (function (SpinnerSize) { /** * 12px Spinner diameter */ SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall"; /** * 16px Spinner diameter */ SpinnerSize[SpinnerSize["small"] = 1] = "small"; /** * 20px Spinner diameter */ SpinnerSize[SpinnerSize["medium"] = 2] = "medium"; /** * 28px Spinner diameter */ SpinnerSize[SpinnerSize["large"] = 3] = "large"; })(SpinnerSize = exports.SpinnerSize || (exports.SpinnerSize = {})); /** * Deprecated at v2.0.0, use 'SpinnerSize' instead. * @deprecated */ var SpinnerType; (function (SpinnerType) { /** * Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.medium instead. */ SpinnerType[SpinnerType["normal"] = 0] = "normal"; /** * Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.large instead. */ SpinnerType[SpinnerType["large"] = 1] = "large"; })(SpinnerType = exports.SpinnerType || (exports.SpinnerType = {})); }); //# sourceMappingURL=Spinner.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities", "./Spinner.Props", "./Spinner.scss"], function (require, exports, React, Utilities_1, Spinner_Props_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Spinner = (function (_super) {
__extends(Spinner, _super);
function Spinner() {
return _super !== null && _super.apply(this, arguments) || this;
}
Spinner.prototype.render = function () {
var _a = this.props, type = _a.type, size = _a.size, label = _a.label, className = _a.className; // TODO remove deprecated type property at >= 2.0.0
return (React.createElement("div", { className: Utilities_1.css('ms-Spinner', styles.root, className) },
React.createElement("div", { className: Utilities_1.css('ms-Spinner-circle', styles.circle, (_b = {},
_b['ms-Spinner--xSmall ' + styles.circleIsXSmall] = size === Spinner_Props_1.SpinnerSize.xSmall,
_b['ms-Spinner--small ' + styles.circleIsSmall] = size === Spinner_Props_1.SpinnerSize.small,
_b['ms-Spinner--medium ' + styles.circleIsMedium] = size === Spinner_Props_1.SpinnerSize.medium,
_b['ms-Spinner--large ' + styles.circleIsLarge] = size === Spinner_Props_1.SpinnerSize.large,
_b['ms-Spinner--normal ' + styles.circleIsTypeMedium] = type === Spinner_Props_1.SpinnerType.normal,
_b['ms-Spinner--large ' + styles.circleIsTypeLarge] = type === Spinner_Props_1.SpinnerType.large // TODO remove deprecated value at >= 2.0.0
,
_b)) }),
label && (React.createElement("div", { className: Utilities_1.css('ms-Spinner-label', styles.label) }, label))));
var _b;
};
return Spinner;
}(Utilities_1.BaseComponent));
Spinner.defaultProps = {
size: Spinner_Props_1.SpinnerSize.medium
};
exports.Spinner = Spinner;
});
//# sourceMappingURL=Spinner.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_56265417', circle: 'circle_56265417', spinAnimation: 'spinAnimation_56265417', circleIsXSmall: 'circleIsXSmall_56265417', circleIsSmall: 'circleIsSmall_56265417', circleIsTypeMedium: 'circleIsTypeMedium_56265417', circleIsMedium: 'circleIsMedium_56265417', circleIsTypeLarge: 'circleIsTypeLarge_56265417', circleIsLarge: 'circleIsLarge_56265417', label: 'label_56265417', }; load_themed_styles_1.loadStyles([{ "rawString": "@-webkit-keyframes spinAnimation_56265417{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinAnimation_56265417{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.root_56265417>.circle_56265417{margin:auto;box-sizing:border-box;border-radius:50%;width:100%;height:100%;border:1.5px solid " }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": ";border-top-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";-webkit-animation:spinAnimation_56265417 1.3s infinite cubic-bezier(.53,.21,.29,.67);animation:spinAnimation_56265417 1.3s infinite cubic-bezier(.53,.21,.29,.67)}.root_56265417>.circle_56265417.circleIsXSmall_56265417{width:12px;height:12px}.root_56265417>.circle_56265417.circleIsSmall_56265417{width:16px;height:16px}.root_56265417>.circle_56265417.circleIsMedium_56265417,.root_56265417>.circle_56265417.circleIsTypeMedium_56265417{width:20px;height:20px}.root_56265417>.circle_56265417.circleIsLarge_56265417,.root_56265417>.circle_56265417.circleIsTypeLarge_56265417{width:28px;height:28px}.root_56265417>.label_56265417{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin-top:10px;text-align:center}@media screen and (-ms-high-contrast:active){.root_56265417>.circle_56265417{border-top-style:none}}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Spinner.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Spinner.Basic.Example"], function (require, exports, React, example_app_base_1, Spinner_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SpinnerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx');
var SpinnerPage = (function (_super) {
__extends(SpinnerPage, _super);
function SpinnerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SpinnerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Spinner', componentName: 'SpinnerExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Various Spinner Types', code: SpinnerBasicExampleCode },
React.createElement(Spinner_Basic_Example_1.SpinnerBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Spinner/Spinner.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a Spinner when a task is not immediate."),
React.createElement("li", null, "Use one Spinner at a time."),
React.createElement("li", null, "Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating."),
React.createElement("li", null, "Use a Spinner when confirming a change has been made or a task is being processed."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use a Spinner when performing immediate tasks."),
React.createElement("li", null, "Don't show multiple Spinners at the same time."),
React.createElement("li", null, "Don't include more than a few words when paired with a Spinner."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Spinner/Spinner.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return SpinnerPage;
}(React.Component));
exports.SpinnerPage = SpinnerPage;
});
//# sourceMappingURL=SpinnerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./Spinner", "./Spinner.Props"], function (require, exports, Spinner_1, Spinner_Props_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Spinner_1); __export(Spinner_Props_1); }); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Deprecated at 2.0.0. Use SpinnerSize instead. * @deprecated */ var SpinnerType; (function (SpinnerType) { SpinnerType[SpinnerType["normal"] = 0] = "normal"; SpinnerType[SpinnerType["large"] = 1] = "large"; })(SpinnerType = exports.SpinnerType || (exports.SpinnerType = {})); var SpinnerSize; (function (SpinnerSize) { SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall"; SpinnerSize[SpinnerSize["small"] = 1] = "small"; SpinnerSize[SpinnerSize["medium"] = 2] = "medium"; SpinnerSize[SpinnerSize["large"] = 3] = "large"; })(SpinnerSize = exports.SpinnerSize || (exports.SpinnerSize = {})); }); //# sourceMappingURL=interfaces.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| TeachingBubble.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| TeachingBubble.js | 21.88% | (7 / 32) | 36.84% | (7 / 19) | 10% | (1 / 10) | 25% | (7 / 28) | |
| TeachingBubble.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| TeachingBubbleContent.js | 14.58% | (7 / 48) | 17.95% | (7 / 39) | 10% | (1 / 10) | 15.91% | (7 / 44) | |
| TeachingBubblePage.js | 25% | (6 / 24) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 28.57% | (6 / 21) | |
| index.js | 25% | (2 / 8) | 0% | (0 / 2) | 0% | (0 / 2) | 33.33% | (2 / 6) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=TeachingBubble.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./TeachingBubbleContent", "../../Callout", "../../common/DirectionalHint", "./TeachingBubble.scss"], function (require, exports, React, Utilities_1, TeachingBubbleContent_1, Callout_1, DirectionalHint_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TeachingBubble = (function (_super) {
__extends(TeachingBubble, _super);
// Constructor
function TeachingBubble(props) {
var _this = _super.call(this, props) || this;
_this.state = {};
return _this;
}
TeachingBubble.prototype.render = function () {
var _a = this.props, calloutProps = _a.calloutProps, targetElement = _a.targetElement;
return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-TeachingBubble', styles.root), ref: this._resolveRef('_callout'), targetElement: targetElement }, calloutProps),
React.createElement(TeachingBubbleContent_1.TeachingBubbleContent, __assign({}, this.props))));
};
return TeachingBubble;
}(Utilities_1.BaseComponent));
// Specify default props values
TeachingBubble.defaultProps = {
calloutProps: {
beakWidth: 16,
gapSpace: 0,
setInitialFocus: true,
doNotLayer: false,
directionalHint: DirectionalHint_1.DirectionalHint.rightCenter
}
};
exports.TeachingBubble = TeachingBubble;
});
//# sourceMappingURL=TeachingBubble.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_ad9dd9c0', bodyContent: 'bodyContent_ad9dd9c0', headerIsLarge: 'headerIsLarge_ad9dd9c0', headline: 'headline_ad9dd9c0', headerIsSmall: 'headerIsSmall_ad9dd9c0', body: 'body_ad9dd9c0', subText: 'subText_ad9dd9c0', closeButton: 'closeButton_ad9dd9c0', footer: 'footer_ad9dd9c0', primaryButton: 'primaryButton_ad9dd9c0', secondaryButton: 'secondaryButton_ad9dd9c0', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_ad9dd9c0{display:block;max-width:364px}.bodyContent_ad9dd9c0{padding:20px}.headerIsLarge_ad9dd9c0:not(:last-child){margin-bottom:14px}.headline_ad9dd9c0{margin:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.headerIsLarge_ad9dd9c0 .headline_ad9dd9c0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:28px;font-weight:100;font-weight:100}.headerIsSmall_ad9dd9c0 .headline_ad9dd9c0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;font-weight:600}html[dir=ltr] .headerIsSmall_ad9dd9c0 .headline_ad9dd9c0{margin-right:10px}html[dir=rtl] .headerIsSmall_ad9dd9c0 .headline_ad9dd9c0{margin-left:10px}.body_ad9dd9c0:not(:last-child){margin-bottom:20px}.subText_ad9dd9c0{margin:0;font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_ad9dd9c0 .closeButton_ad9dd9c0{position:absolute;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:12px}html[dir=ltr] .root_ad9dd9c0 .closeButton_ad9dd9c0{right:0}html[dir=rtl] .root_ad9dd9c0 .closeButton_ad9dd9c0{left:0}html[dir=ltr] .footer_ad9dd9c0 .ms-Button:not(:first-child){margin-left:20px}html[dir=rtl] .footer_ad9dd9c0 .ms-Button:not(:first-child){margin-right:20px}.root_ad9dd9c0 .ms-Callout-beak,.root_ad9dd9c0 .ms-Callout-main,.root_ad9dd9c0 .ms-Callout-smallbeak{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0 .ms-Button-label{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0:hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0:focus{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0:active{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0 .ms-Button-label{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0:hover{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0:focus{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=TeachingBubble.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "../../Button", "../../Image", "./TeachingBubble.scss"], function (require, exports, React, Utilities_1, Button_1, Image_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TeachingBubbleContent = (function (_super) {
__extends(TeachingBubbleContent, _super);
// Constructor
function TeachingBubbleContent(props) {
var _this = _super.call(this, props) || this;
_this._id = Utilities_1.getId('TeachingBubble');
_this.state = {};
return _this;
}
TeachingBubbleContent.prototype.render = function () {
var _a = this.props, illustrationImage = _a.illustrationImage, primaryButtonProps = _a.primaryButtonProps, secondaryButtonProps = _a.secondaryButtonProps, headline = _a.headline, hasCondensedHeadline = _a.hasCondensedHeadline, hasCloseIcon = _a.hasCloseIcon, onDismiss = _a.onDismiss, closeButtonAriaLabel = _a.closeButtonAriaLabel;
var imageContent;
var headerContent;
var bodyContent;
var footerContent;
var closeButton;
if (illustrationImage && illustrationImage.src) {
imageContent = (React.createElement("div", { className: 'ms-TeachingBubble-header' },
React.createElement(Image_1.Image, __assign({}, illustrationImage))));
}
if (headline) {
headerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-header', hasCondensedHeadline ?
'ms-TeachingBubble-header--small ' + styles.headerIsSmall :
'ms-TeachingBubble-header--large ' + styles.headerIsLarge) },
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-headline', styles.headline) }, headline)));
}
if (this.props.children) {
bodyContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-body', styles.body) },
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-subText', styles.subText) }, this.props.children)));
}
if (primaryButtonProps || secondaryButtonProps) {
footerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-footer', styles.footer) },
primaryButtonProps && (React.createElement(Button_1.PrimaryButton, __assign({}, primaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }))),
secondaryButtonProps && (React.createElement(Button_1.DefaultButton, __assign({}, secondaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) })))));
}
if (hasCloseIcon) {
closeButton = (React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-TeachingBubble-closebutton', styles.closeButton), iconProps: { iconName: 'Cancel' }, title: closeButtonAriaLabel, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }));
}
return (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-content') },
imageContent,
closeButton,
React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-bodycontent', styles.bodyContent) },
headerContent,
bodyContent,
footerContent)));
};
return TeachingBubbleContent;
}(Utilities_1.BaseComponent));
// Specify default props values
TeachingBubbleContent.defaultProps = {
hasCondensedHeadline: false,
imageProps: {
imageFit: Image_1.ImageFit.cover,
width: 364,
height: 130
}
};
exports.TeachingBubbleContent = TeachingBubbleContent;
});
//# sourceMappingURL=TeachingBubbleContent.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/Layer", "@uifabric/example-app-base", "./examples/TeachingBubble.Basic.Example", "./examples/TeachingBubble.Condensed.Example", "./examples/TeachingBubble.Illustration.Example"], function (require, exports, React, Link_1, Layer_1, example_app_base_1, TeachingBubble_Basic_Example_1, TeachingBubble_Condensed_Example_1, TeachingBubble_Illustration_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TeachingBubbleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx');
var TeachingBubbleCondensedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx');
var TeachingBubbleIllustrationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx');
var TeachingBubblePage = (function (_super) {
__extends(TeachingBubblePage, _super);
function TeachingBubblePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TeachingBubblePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'TeachingBubble', componentName: 'TeachingBubbleExample', exampleCards: React.createElement(Layer_1.LayerHost, null,
React.createElement(example_app_base_1.ExampleCard, { title: 'TeachingBubble', code: TeachingBubbleBasicExampleCode },
React.createElement(TeachingBubble_Basic_Example_1.TeachingBubbleBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'TeachingBubble Condensed', code: TeachingBubbleCondensedExampleCode },
React.createElement(TeachingBubble_Condensed_Example_1.TeachingBubbleCondensedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'TeachingBubble with Illustration', code: TeachingBubbleIllustrationExampleCode },
React.createElement(TeachingBubble_Illustration_Example_1.TeachingBubbleIllustrationExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/components/TeachingBubble' }, "TeachingBubbles"),
React.createElement("span", null, " allow the user to display important hints on their web pages with a callout box.")) }));
};
return TeachingBubblePage;
}(React.Component));
exports.TeachingBubblePage = TeachingBubblePage;
});
//# sourceMappingURL=TeachingBubblePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 1 | define(["require", "exports", "./TeachingBubble", "./TeachingBubbleContent"], function (require, exports, TeachingBubble_1, TeachingBubbleContent_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(TeachingBubble_1); __export(TeachingBubbleContent_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| TextField.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| TextField.js | 4.7% | (7 / 149) | 7% | (7 / 100) | 2.94% | (1 / 34) | 4.83% | (7 / 145) | |
| TextField.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| TextFieldPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=TextField.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Label", "../../Utilities", "./TextField.scss"], function (require, exports, React, Label_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TextField = (function (_super) {
__extends(TextField, _super);
function TextField(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'value': 'defaultValue'
});
_this._id = Utilities_1.getId('TextField');
_this._descriptionId = Utilities_1.getId('TextFieldDescription');
_this.state = {
value: props.value || props.defaultValue || '',
isFocused: false,
errorMessage: ''
};
_this._onInputChange = _this._onInputChange.bind(_this);
_this._onFocus = _this._onFocus.bind(_this);
_this._onBlur = _this._onBlur.bind(_this);
_this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime);
_this._lastValidation = 0;
_this._isDescriptionAvailable = false;
return _this;
}
Object.defineProperty(TextField.prototype, "value", {
/**
* Gets the current value of the text field.
*/
get: function () {
return this.state.value;
},
enumerable: true,
configurable: true
});
TextField.prototype.componentDidMount = function () {
this._isMounted = true;
this._adjustInputHeight();
if (this.props.validateOnLoad) {
this._validate(this.state.value);
}
};
TextField.prototype.componentWillReceiveProps = function (newProps) {
var onBeforeChange = this.props.onBeforeChange;
if (newProps.value !== undefined && newProps.value !== this.state.value) {
if (onBeforeChange) {
onBeforeChange(newProps.value);
}
this._latestValue = newProps.value;
this.setState({
value: newProps.value,
errorMessage: ''
});
this._delayedValidate(newProps.value);
}
};
TextField.prototype.componentWillUnmount = function () {
this._isMounted = false;
};
TextField.prototype.render = function () {
var _a = this.props, className = _a.className, description = _a.description, disabled = _a.disabled, iconClass = _a.iconClass, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined;
var isFocused = this.state.isFocused;
var errorMessage = this._errorMessage;
this._isDescriptionAvailable = Boolean(description || errorMessage);
var textFieldClassName = Utilities_1.css('ms-TextField', styles.root, className, (_b = {},
_b['is-required ' + styles.rootIsRequired] = required,
_b['is-disabled ' + styles.rootIsDisabled] = disabled,
_b['is-active ' + styles.rootIsActive] = isFocused,
_b['ms-TextField--multiline ' + styles.rootIsMultiline] = multiline,
_b['ms-TextField--underlined ' + styles.rootIsUnderlined] = underlined,
_b));
return (React.createElement("div", { className: textFieldClassName },
label && React.createElement(Label_1.Label, { htmlFor: this._id }, label),
iconClass && React.createElement("i", { className: Utilities_1.css(iconClass, styles.icon) }),
multiline ? this._renderTextArea() : this._renderInput(),
this._isDescriptionAvailable &&
React.createElement("span", { id: this._descriptionId },
description && React.createElement("span", { className: Utilities_1.css('ms-TextField-description', styles.description) }, description),
errorMessage &&
React.createElement("div", { "aria-live": 'assertive' },
React.createElement(Utilities_1.DelayedRender, null,
React.createElement("p", { className: Utilities_1.css('ms-TextField-errorMessage ms-u-slideDownIn20', styles.errorMessage), "data-automation-id": 'error-message' },
React.createElement("i", { className: Utilities_1.css('ms-Icon ms-Icon--Error', styles.errorIcon), "aria-hidden": 'true' }),
errorMessage))))));
var _b;
};
/**
* Sets focus on the text field
*/
TextField.prototype.focus = function () {
if (this._textElement) {
this._textElement.focus();
}
};
/**
* Selects the text field
*/
TextField.prototype.select = function () {
if (this._textElement) {
this._textElement.select();
}
};
/**
* Sets the selection start of the text field to a specified value
*/
TextField.prototype.setSelectionStart = function (value) {
if (this._textElement) {
this._textElement.selectionStart = value;
}
};
/**
* Sets the selection end of the text field to a specified value
*/
TextField.prototype.setSelectionEnd = function (value) {
if (this._textElement) {
this._textElement.selectionEnd = value;
}
};
TextField.prototype._onFocus = function (ev) {
if (this.props.onFocus) {
this.props.onFocus(ev);
}
this.setState({ isFocused: true });
if (this.props.validateOnFocusIn) {
this._validate(this.state.value);
}
};
TextField.prototype._onBlur = function (ev) {
if (this.props.onBlur) {
this.props.onBlur(ev);
}
this.setState({ isFocused: false });
if (this.props.validateOnFocusOut) {
this._validate(this.state.value);
}
};
TextField.prototype._getTextElementClassName = function () {
var errorMessage = this._errorMessage;
var textFieldClassName;
if (this.props.multiline && !this.props.resizable) {
textFieldClassName = Utilities_1.css('ms-TextField-field ms-TextField-field--unresizable', styles.field, styles.fieldIsUnresizable);
}
else {
textFieldClassName = Utilities_1.css('ms-TextField-field', styles.field);
}
return Utilities_1.css(textFieldClassName, this.props.inputClassName, (_a = {},
_a['ms-TextField-invalid ' + styles.invalid] = !!errorMessage,
_a[styles.hasIcon] = !!this.props.iconClass,
_a));
var _a;
};
Object.defineProperty(TextField.prototype, "_errorMessage", {
get: function () {
var errorMessage = this.state.errorMessage;
if (!errorMessage) {
errorMessage = this.props.errorMessage;
}
return errorMessage;
},
enumerable: true,
configurable: true
});
TextField.prototype._renderTextArea = function () {
var textAreaProps = Utilities_1.getNativeProps(this.props, Utilities_1.textAreaProperties, ['defaultValue']);
return (React.createElement("textarea", __assign({ id: this._id }, textAreaProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, "aria-label": this.props.ariaLabel, onFocus: this._onFocus, onBlur: this._onBlur })));
};
TextField.prototype._renderInput = function () {
var inputProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultValue']);
return (React.createElement("input", __assign({ type: 'text', id: this._id }, inputProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-label": this.props.ariaLabel, "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, onFocus: this._onFocus, onBlur: this._onBlur })));
};
TextField.prototype._onInputChange = function (event) {
var _this = this;
var element = event.target;
var value = element.value;
// Avoid doing unnecessary work when the value has not changed.
if (value === this._latestValue) {
return;
}
this._latestValue = value;
this.setState({
value: value,
errorMessage: ''
}, function () {
_this._adjustInputHeight();
if (_this.props.onChanged) {
_this.props.onChanged(value);
}
});
var _a = this.props, validateOnFocusIn = _a.validateOnFocusIn, validateOnFocusOut = _a.validateOnFocusOut;
if (!(validateOnFocusIn || validateOnFocusOut)) {
this._delayedValidate(value);
}
var onBeforeChange = this.props.onBeforeChange;
onBeforeChange(value);
};
TextField.prototype._validate = function (value) {
var _this = this;
// In case of _validate called multi-times during executing validate logic with promise return.
if (this._latestValidateValue === value) {
return;
}
this._latestValidateValue = value;
var onGetErrorMessage = this.props.onGetErrorMessage;
var result = onGetErrorMessage(value || '');
if (result !== undefined) {
if (typeof result === 'string') {
this.setState({
errorMessage: result
});
this._notifyAfterValidate(value, result);
}
else {
var currentValidation_1 = ++this._lastValidation;
result.then(function (errorMessage) {
if (_this._isMounted && currentValidation_1 === _this._lastValidation) {
_this.setState({ errorMessage: errorMessage });
}
_this._notifyAfterValidate(value, errorMessage);
});
}
}
else {
this._notifyAfterValidate(value, '');
}
};
TextField.prototype._notifyAfterValidate = function (value, errorMessage) {
if (this._isMounted &&
value === this.state.value &&
this.props.onNotifyValidationResult) {
this.props.onNotifyValidationResult(errorMessage, value);
}
};
TextField.prototype._adjustInputHeight = function () {
if (this._textElement && this.props.autoAdjustHeight && this.props.multiline) {
var textField = this._textElement;
textField.style.height = '';
var scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars
textField.style.height = scrollHeight + 'px';
}
};
return TextField;
}(Utilities_1.BaseComponent));
TextField.defaultProps = {
multiline: false,
resizable: true,
autoAdjustHeight: false,
underlined: false,
onChanged: function () { },
onBeforeChange: function () { },
onNotifyValidationResult: function () { },
onGetErrorMessage: function () { return undefined; },
deferredValidationTime: 200,
errorMessage: '',
validateOnFocusIn: false,
validateOnFocusOut: false,
validateOnLoad: true,
};
exports.TextField = TextField;
});
//# sourceMappingURL=TextField.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_4b4ccde0', screenReaderOnly: 'screenReaderOnly_4b4ccde0', rootIsDisabled: 'rootIsDisabled_4b4ccde0', rootIsRequired: 'rootIsRequired_4b4ccde0', rootIsActive: 'rootIsActive_4b4ccde0', errorIcon: 'errorIcon_4b4ccde0', icon: 'icon_4b4ccde0', field: 'field_4b4ccde0', hasIcon: 'hasIcon_4b4ccde0', description: 'description_4b4ccde0', rootIsUnderlined: 'rootIsUnderlined_4b4ccde0', rootIsMultiline: 'rootIsMultiline_4b4ccde0', errorMessage: 'errorMessage_4b4ccde0', invalid: 'invalid_4b4ccde0', fieldIsUnresizable: 'fieldIsUnresizable_4b4ccde0', hidden: 'hidden_4b4ccde0', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_4b4ccde0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;margin-bottom:8px;position:relative}.root_4b4ccde0 .ms-Label{font-size:14px;font-weight:400}.screenReaderOnly_4b4ccde0{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.root_4b4ccde0.rootIsDisabled_4b4ccde0 .field{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.root_4b4ccde0.rootIsDisabled_4b4ccde0::-webkit-input-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsDisabled_4b4ccde0::-moz-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsDisabled_4b4ccde0:-moz-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsDisabled_4b4ccde0:-ms-input-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0 .ms-Label::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0::-webkit-input-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0::-moz-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0:-moz-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0:-ms-input-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsActive_4b4ccde0{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.errorIcon_4b4ccde0{vertical-align:middle;font-size:14px}html[dir=ltr] .errorIcon_4b4ccde0{margin-right:5px}html[dir=rtl] .errorIcon_4b4ccde0{margin-left:5px}.icon_4b4ccde0{position:absolute;bottom:8px;top:auto}html[dir=ltr] .icon_4b4ccde0{right:8px}html[dir=rtl] .icon_4b4ccde0{left:8px}.field_4b4ccde0{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-radius:0;font-weight:400;font-size:14px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:32px;padding:0 12px 1px 12px;width:100%;outline:0;text-overflow:ellipsis}html[dir=rtl] .field_4b4ccde0{padding:0 12px 1px 12px}html[dir=ltr] .field_4b4ccde0.hasIcon_4b4ccde0{padding-right:24px}html[dir=rtl] .field_4b4ccde0.hasIcon_4b4ccde0{padding-left:24px}.field_4b4ccde0:hover{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_4b4ccde0:focus{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_4b4ccde0:focus,.field_4b4ccde0:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_4b4ccde0:focus,.field_4b4ccde0:hover{border-color:#37006e}}.field_4b4ccde0[disabled]{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.field_4b4ccde0::-webkit-input-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0::-moz-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0:-moz-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0:-ms-input-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0::-ms-clear{display:none}.description_4b4ccde0{color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:11px}.root_4b4ccde0.rootIsUnderlined_4b4ccde0{border-bottom:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";display:table;width:100%}.root_4b4ccde0.rootIsUnderlined_4b4ccde0:hover{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4b4ccde0.rootIsUnderlined_4b4ccde0:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4b4ccde0.rootIsUnderlined_4b4ccde0:hover{border-color:#37006e}}.root_4b4ccde0.rootIsUnderlined_4b4ccde0:active,.root_4b4ccde0.rootIsUnderlined_4b4ccde0:focus{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{font-size:14px;display:table-cell;vertical-align:top;padding-top:9px;height:32px;width:1%;white-space:nowrap}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{margin-right:8px}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{margin-left:8px}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-left:12px}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-right:12px}.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{border:0;display:table-cell;padding-top:8px;padding-bottom:3px}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{float:left}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{float:right}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:left}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:right}.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0:active,.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0:focus,.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0:hover{outline:0}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsDisabled_4b4ccde0{border-bottom-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsDisabled_4b4ccde0 .ms-Label{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsDisabled_4b4ccde0 .field_4b4ccde0{background-color:transparent;color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsActive_4b4ccde0{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsActive_4b4ccde0{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsActive_4b4ccde0{border-color:#37006e}}.root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;font-size:14px;font-weight:400;line-height:17px;min-height:60px;height:auto;padding-top:6px;overflow:auto}html[dir=ltr] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0.hasIcon_4b4ccde0{padding-right:40px}html[dir=rtl] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0.hasIcon_4b4ccde0{padding-left:40px}.errorMessage_4b4ccde0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "redDark", "defaultValue": "#a80000" }, { "rawString": ";margin:0;padding-top:5px}.invalid_4b4ccde0,.invalid_4b4ccde0:focus,.invalid_4b4ccde0:hover{border-color:" }, { "theme": "redDark", "defaultValue": "#a80000" }, { "rawString": "}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-left:12px}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-right:12px}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-right:0}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-left:0}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:left}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:right}html[dir=ltr] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .icon_4b4ccde0{right:24px}html[dir=rtl] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .icon_4b4ccde0{left:24px}.root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0.fieldIsUnresizable_4b4ccde0{resize:none}.hidden_4b4ccde0{display:none}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=TextField.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/TextField.Basic.Example", "./examples/TextField.ErrorMessage.Example"], function (require, exports, React, example_app_base_1, TextField_Basic_Example_1, TextField_ErrorMessage_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx');
var TextFieldErrorMessageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx');
var TextFieldPage = (function (_super) {
__extends(TextFieldPage, _super);
function TextFieldPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TextFieldPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'TextField', componentName: 'TextFieldExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'TextField variations', code: TextFieldBasicExampleCode },
React.createElement(TextField_Basic_Example_1.TextFieldBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'TextField error message variations', code: TextFieldErrorMessageExampleCode },
React.createElement(TextField_ErrorMessage_Example_1.TextFieldErrorMessageExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the TextField to accept data input on a form or page."),
React.createElement("li", null, "Label the TextField with a helpful name. "),
React.createElement("li", null, "Provide concise helper text that specifies what content is expected to be entered."),
React.createElement("li", null, "Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error)."),
React.createElement("li", null, "When part of a form, provide clear designations for which fields are required vs. optional."),
React.createElement("li", null, "Provide all appropriate methods for submitting provided data (onEnter or a dedicated \u2018Submit\u2019 button)."),
React.createElement("li", null, "Provide all appropriate methods of clearing provided data (\u2018X\u2019 or something similar)."),
React.createElement("li", null, "Allow for selection, copy and paste of field data."),
React.createElement("li", null, "Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc)."),
React.createElement("li", null, "When long entries are expected, provide a mechanism for overflow or expansion of the control itself."),
React.createElement("li", null, "Ensure that the TextField is functional through use of mouse/keyboard or touch when available."),
React.createElement("li", null, "Ensure that the TextField is accessible through screen reader and/or other accessibility tools."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use a TextField to render basic copy as part of a body element of a page."),
React.createElement("li", null, "Don\u2019t provide an unlabeled TextField and expect that users will know what to do with it."),
React.createElement("li", null, "Don\u2019t place a TextField inline with body copy. "),
React.createElement("li", null, "Don\u2019t be overly verbose with helper text."),
React.createElement("li", null, "Don\u2019t occlude the entry or allow entry when the active content is not visible."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/TextField/TextField.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return TextFieldPage;
}(React.Component));
exports.TextFieldPage = TextFieldPage;
});
//# sourceMappingURL=TextFieldPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./TextField"], function (require, exports, TextField_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(TextField_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ThemePage.js | 13.95% | (6 / 43) | 26.67% | (4 / 15) | 7.14% | (1 / 14) | 15% | (6 / 40) | |
| ThemePage.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| defaultTheme.js | 33.33% | (1 / 3) | 100% | (0 / 0) | 0% | (0 / 1) | 33.33% | (1 / 3) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@microsoft/load-themed-styles", "@uifabric/example-app-base", "./defaultTheme", "office-ui-fabric-react/lib/Callout", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/Selection", "office-ui-fabric-react/lib/ColorPicker", "./ThemePage.scss"], function (require, exports, React, load_themed_styles_1, example_app_base_1, defaultTheme_1, Callout_1, DetailsList_1, Selection_1, ColorPicker_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx');
var ThemePage = (function (_super) {
__extends(ThemePage, _super);
function ThemePage() {
var _this = _super.call(this) || this;
_this._onPickerDismiss = _this._onPickerDismiss.bind(_this);
_this.state = {
colors: Object.keys(defaultTheme_1.defaultTheme).map(function (variableName) { return ({
key: variableName,
name: variableName,
value: defaultTheme_1.defaultTheme[variableName],
description: '',
colorPickerProps: null
}); })
};
return _this;
}
ThemePage.prototype.render = function () {
var _this = this;
var _a = this.state, colors = _a.colors, colorPickerProps = _a.colorPickerProps;
return (React.createElement("div", { className: 'Themes' },
React.createElement("h1", { className: 'ms-font-xxl' }, "Themes"),
React.createElement("p", null, "The entire color pallete of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually."),
React.createElement("p", null,
"To override the themes, you need to call ",
React.createElement("span", { className: 'code' }, "loadTheme()"),
" with the appropriate set of overrides:"),
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, ThemeCodeExample),
React.createElement("h1", { className: 'ms-font-xl' }, "Define a theme"),
React.createElement("div", null,
React.createElement(DetailsList_1.DetailsList, { ref: 'list', items: colors, selectionMode: Selection_1.SelectionMode.none, layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, columns: [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 150,
maxWidth: 150
},
{
key: 'color',
name: 'Color',
fieldName: 'value',
minWidth: 200,
onRender: function (item, index) { return (React.createElement("div", { className: 'ThemePage-colorSwatch', "data-is-focusable": 'true', onClick: _this._onSwatchClicked.bind(_this, item, index) },
React.createElement("span", { className: 'ThemePage-swatch', style: { backgroundColor: item.value } }),
React.createElement("span", { className: 'ThemePage-colorValue' }, item.value))); }
},
{
key: 'desc',
name: 'Description',
fieldName: 'description',
minWidth: 90
}
] }),
colorPickerProps && (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 10, targetElement: colorPickerProps.targetElement, onDismiss: this._onPickerDismiss },
React.createElement(ColorPicker_1.ColorPicker, { color: colorPickerProps.value, onColorChanged: this._onColorChanged.bind(this, colorPickerProps.index) }))))));
};
ThemePage.prototype._onSwatchClicked = function (item, index, ev) {
this.setState({
colorPickerProps: {
targetElement: ev.currentTarget.children[0],
value: item.value,
index: index
}
});
};
ThemePage.prototype._onColorChanged = function (index, newColor) {
var colors = this.state.colors;
var color = colors[index];
var theme = {};
color.value = newColor;
for (var i = 0; i < colors.length; i++) {
var themeColor = colors[i];
theme[themeColor.key] = themeColor.value;
}
load_themed_styles_1.loadTheme(theme);
// The theme has changed values, but color state is the same. Force an update on the list.
this.refs.list.forceUpdate();
};
ThemePage.prototype._onPickerDismiss = function () {
this.setState({
colorPickerProps: null
});
};
return ThemePage;
}(React.Component));
exports.ThemePage = ThemePage;
});
//# sourceMappingURL=ThemePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = {}; load_themed_styles_1.loadStyles([{ "rawString": ".Themes{padding:40px}.ThemePage-colorSwatch{margin:-10px 0;line-height:36px;white-space:nowrap;cursor:pointer}.ThemePage-colorSwatch::-moz-focus-inner{border:0}.ThemePage-colorSwatch{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .ThemePage-colorSwatch:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.ThemePage-colorSwatch:hover{background:rgba(0,0,0,.05)}.ThemePage-swatch{display:inline-block;width:36px;height:36px;vertical-align:middle;border:1px solid rgba(127,127,127,.5)}html[dir=ltr] .ThemePage-swatch{margin-right:5px}html[dir=rtl] .ThemePage-swatch{margin-left:5px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ThemePage.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.defaultTheme = { themeDarker: '#004578', themeDark: '#005a9e', themeDarkAlt: '#106ebe', themePrimary: '#0078d7', themeSecondary: '#2b88d8', themeTertiary: '#71afe5', themeLight: '#c7e0f4', themeLighter: '#deecf9', themeLighterAlt: '#eff6fc', neutralDark: '#212121', neutralPrimary: '#333333', neutralSecondary: '#666666', neutralSecondaryAlt: '#767676', neutralTertiary: '#a6a6a6', neutralTertiaryAlt: '#c8c8c8', neutralQuaternary: '#d0d0d0', neutralQuaternaryAlt: '#dadada', neutralLight: '#eaeaea', neutralLighter: '#f4f4f4', neutralLighterAlt: '#f8f8f8', alert: '#d83b01', alertBackground: '#deecf9', black: '#000000', blackTranslucent40: 'rgba(0,0,0,.4)', blue: '#0078d7', blueDark: '#002050', blueLight: '#00bcf2', blueMid: '#00188f', error: '#a80000', errorBackground: '#fde7e9', green: '#107c10', greenDark: '#004b1c', greenLight: '#bad80a', info: '#107c10', infoBackground: '#f4f4f4', magenta: '#b4009e', magentaDark: '#5c005c', magentaLight: '#e3008c', orange: '#d83b01', orangeLight: '#ff8c00', orangeLighter: '#ea4300', purple: '#5c2d91', purpleDark: '#32145a', purpleLight: '#b4a0ff', red: '#e81123', redDark: '#a80000', success: '#107c10', successBackground: '#dff6dd', teal: '#008272', tealDark: '#004b50', tealLight: '#00b294', white: '#ffffff', whiteTranslucent40: 'rgba(255,255,255,.4)', yellow: '#ffb900', yellowLight: '#fff100' }; }); //# sourceMappingURL=defaultTheme.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Toggle.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| Toggle.js | 12.5% | (8 / 64) | 16.39% | (10 / 61) | 6.25% | (1 / 16) | 14.04% | (8 / 57) | |
| Toggle.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| TogglePage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=Toggle.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Label", "./Toggle.scss"], function (require, exports, React, Utilities_1, Label_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Toggle = (function (_super) {
__extends(Toggle, _super);
function Toggle(props) {
var _this = _super.call(this) || this;
_this._warnMutuallyExclusive({
checked: 'defaultChecked'
});
_this.state = {
isChecked: !!(props.checked || props.defaultChecked)
};
_this._id = props.id || Utilities_1.getId('Toggle');
return _this;
}
Object.defineProperty(Toggle.prototype, "checked", {
/**
* Gets the current checked state of the toggle.
*/
get: function () {
return this.state.isChecked;
},
enumerable: true,
configurable: true
});
Toggle.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.checked !== undefined) {
this.setState({
isChecked: newProps.checked
});
}
};
Toggle.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, onAriaLabel = _a.onAriaLabel, offAriaLabel = _a.offAriaLabel, onText = _a.onText, offText = _a.offText, className = _a.className, disabled = _a.disabled;
var isChecked = this.state.isChecked;
var stateText = isChecked ? onText : offText;
var ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
var toggleNativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.buttonProperties);
return (React.createElement("div", { className: Utilities_1.css(styles.root, 'ms-Toggle', className, (_b = {
'is-checked': isChecked,
'is-enabled': !disabled,
'is-disabled': disabled
},
_b[styles.isChecked] = isChecked,
_b[styles.isEnabled] = !disabled,
_b[styles.isDisabled] = disabled,
_b)) },
React.createElement("div", { className: Utilities_1.css(styles.innerContainer, 'ms-Toggle-innerContainer') },
label && (React.createElement(Label_1.Label, { className: 'ms-Toggle-label', htmlFor: this._id }, label)),
React.createElement("div", { className: Utilities_1.css(styles.slider, 'ms-Toggle-slider') },
React.createElement("button", __assign({ ref: function (c) { return _this._toggleButton = c; }, type: 'button', id: this._id }, toggleNativeProps, { name: this._id, className: Utilities_1.css(styles.button, 'ms-Toggle-button'), disabled: disabled, "aria-pressed": isChecked, "aria-label": ariaLabel, onClick: this._onClick })),
React.createElement("div", { className: Utilities_1.css(styles.background, 'ms-Toggle-background') },
React.createElement("div", { className: Utilities_1.css(styles.focus, 'ms-Toggle-focus') }),
React.createElement("div", { className: Utilities_1.css(styles.thumb, 'ms-Toggle-thumb') })),
stateText && (React.createElement(Label_1.Label, { className: Utilities_1.css(styles.stateText, 'ms-Toggle-stateText') }, stateText))))));
var _b;
};
Toggle.prototype.focus = function () {
if (this._toggleButton) {
this._toggleButton.focus();
}
};
Toggle.prototype._onClick = function () {
var _a = this.props, checked = _a.checked, onChanged = _a.onChanged;
var isChecked = this.state.isChecked;
// Only update the state if the user hasn't provided it.
if (checked === undefined) {
this.setState({
isChecked: !isChecked
});
}
if (onChanged) {
onChanged(!isChecked);
}
};
return Toggle;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], Toggle.prototype, "_onClick", null);
exports.Toggle = Toggle;
});
//# sourceMappingURL=Toggle.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_e046b8da', isEnabled: 'isEnabled_e046b8da', button: 'button_e046b8da', background: 'background_e046b8da', thumb: 'thumb_e046b8da', slider: 'slider_e046b8da', isChecked: 'isChecked_e046b8da', isDisabled: 'isDisabled_e046b8da', innerContainer: 'innerContainer_e046b8da', focus: 'focus_e046b8da', stateText: 'stateText_e046b8da', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_e046b8da{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;display:block;margin-bottom:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.isEnabled_e046b8da .button_e046b8da{cursor:pointer}.isEnabled_e046b8da .background_e046b8da{border:1px solid " }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isEnabled_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isEnabled_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.isEnabled_e046b8da .slider_e046b8da:hover .background_e046b8da{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.isEnabled_e046b8da .slider_e046b8da:hover .thumb_e046b8da{background:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.isEnabled_e046b8da.isChecked_e046b8da .background_e046b8da{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isEnabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isEnabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=ltr] .isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{left:28px}html[dir=rtl] .isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{right:28px}@media screen and (-ms-high-contrast:active){.isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.isEnabled_e046b8da.isChecked_e046b8da .slider_e046b8da:hover .background_e046b8da{border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:" }, { "theme": "themeSecondary", "defaultValue": "#2b88d8" }, { "rawString": "}.isEnabled_e046b8da.isChecked_e046b8da .slider_e046b8da:hover .thumb_e046b8da{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.isDisabled_e046b8da .thumb_e046b8da{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da .thumb_e046b8da{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da .thumb_e046b8da{background-color:#600000}}.isDisabled_e046b8da .background_e046b8da{border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da .background_e046b8da{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da .background_e046b8da{border-color:#600000}}.isDisabled_e046b8da.isChecked_e046b8da .background_e046b8da{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border:1px solid transparent}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:#600000}}.isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] .isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{left:28px}html[dir=rtl] .isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{right:28px}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.innerContainer_e046b8da{display:inline-block;min-width:45px}.ms-Fabric.is-focusVisible .root_e046b8da.isEnabled_e046b8da .button_e046b8da:focus+.background_e046b8da .focus_e046b8da{border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.button_e046b8da{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;margin:0;padding:0}.slider_e046b8da{position:relative;min-height:20px}.background_e046b8da{display:inline-block;position:absolute;width:44px;height:20px;box-sizing:border-box;vertical-align:middle;border-radius:20px;cursor:pointer;transition:all .1s ease;pointer-events:none}.thumb_e046b8da{position:absolute;width:10px;height:10px;border-radius:10px;top:4px;background:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";transition:all .1s ease}html[dir=ltr] .thumb_e046b8da{left:4px}html[dir=rtl] .thumb_e046b8da{right:4px}.stateText_e046b8da{display:inline-block;vertical-align:top;line-height:20px;padding:0}html[dir=ltr] .stateText_e046b8da{margin-left:54px}html[dir=rtl] .stateText_e046b8da{margin-right:54px}.focus_e046b8da{position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;box-sizing:border-box;outline:transparent}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Toggle.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Toggle.Basic.Example"], function (require, exports, React, example_app_base_1, Toggle_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ToggleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx');
var TogglePage = (function (_super) {
__extends(TogglePage, _super);
function TogglePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TogglePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Toggle', componentName: 'ToggleExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Toggle', code: ToggleBasicExampleCode },
React.createElement(Toggle_Basic_Example_1.ToggleBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use."),
React.createElement("h2", { className: 'ms-font-xl' }, "Choosing between Toggle and Checkbox"),
React.createElement("p", null, "For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips:"),
React.createElement("ul", null,
React.createElement("li", null, "Use a Toggle for binary settings when changes become effective immediately after the user changes them."),
React.createElement("li", null, "In the above example, it's clear with the Toggle that the wireless is set to \"On.\" But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on."),
React.createElement("li", null, "Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a \"Submit\", \"Next\", \"Ok\" button to apply changes, use a Checkbox."))), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use \"Show/Hide\" if the setting is \"Show images.\""))), donts: React.createElement("div", null,
React.createElement("ul", null, "Don\u2019t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding \"Apply\" button instead of a Toggle.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Toggle/Toggle.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return TogglePage;
}(React.Component));
exports.TogglePage = TogglePage;
});
//# sourceMappingURL=TogglePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./Toggle"], function (require, exports, Toggle_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Toggle_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Tooltip.Props.js | 16.67% | (1 / 6) | 0% | (0 / 2) | 0% | (0 / 2) | 16.67% | (1 / 6) | |
| Tooltip.js | 22.58% | (7 / 31) | 35% | (7 / 20) | 10% | (1 / 10) | 25.93% | (7 / 27) | |
| Tooltip.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| TooltipHost.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| TooltipHost.js | 16% | (8 / 50) | 23.26% | (10 / 43) | 7.14% | (1 / 14) | 18.6% | (8 / 43) | |
| TooltipPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| TooltipPage.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| index.js | 20% | (2 / 10) | 0% | (0 / 2) | 0% | (0 / 2) | 25% | (2 / 8) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var TooltipDelay; (function (TooltipDelay) { TooltipDelay[TooltipDelay["zero"] = 0] = "zero"; TooltipDelay[TooltipDelay["medium"] = 1] = "medium"; })(TooltipDelay = exports.TooltipDelay || (exports.TooltipDelay = {})); }); //# sourceMappingURL=Tooltip.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 2 2 1 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../Utilities", "./Tooltip.Props", "../../Callout", "../../common/DirectionalHint", "./Tooltip.scss"], function (require, exports, React, Utilities_1, Tooltip_Props_1, Callout_1, DirectionalHint_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Tooltip = (function (_super) {
__extends(Tooltip, _super);
function Tooltip() {
return _super !== null && _super.apply(this, arguments) || this;
}
Tooltip.prototype.render = function () {
var _a = this.props, targetElement = _a.targetElement, content = _a.content, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id;
return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-Tooltip ms-u-fadeIn200', styles.root, (_b = {},
_b[styles.hasMediumDelay] = delay === Tooltip_Props_1.TooltipDelay.medium,
_b)), targetElement: targetElement, directionalHint: directionalHint }, calloutProps, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)),
React.createElement("div", { className: Utilities_1.css('ms-Tooltip-content') },
React.createElement("p", { className: Utilities_1.css('ms-Tooltip-subText', styles.subText), id: id, role: 'tooltip' }, content))));
var _b;
};
return Tooltip;
}(Utilities_1.BaseComponent));
// Specify default props values
Tooltip.defaultProps = {
directionalHint: DirectionalHint_1.DirectionalHint.topCenter,
delay: Tooltip_Props_1.TooltipDelay.medium,
calloutProps: {
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
setInitialFocus: true,
doNotLayer: false
}
};
exports.Tooltip = Tooltip;
});
//# sourceMappingURL=Tooltip.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { root: 'root_d6e95075', hasMediumDelay: 'hasMediumDelay_d6e95075', subText: 'subText_d6e95075', host: 'host_d6e95075', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_d6e95075{max-width:364px;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:8px;pointer-events:none}.root_d6e95075.hasMediumDelay_d6e95075{-webkit-animation-delay:.3s;animation-delay:.3s}.subText_d6e95075{margin:0;font-size:12px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";word-break:break-all}.host_d6e95075{display:inline}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=Tooltip.scss.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=TooltipHost.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./Tooltip", "./Tooltip.Props", "./Tooltip.scss"], function (require, exports, React, Utilities_1, Tooltip_1, Tooltip_Props_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TooltipHost = (function (_super) {
__extends(TooltipHost, _super);
// Constructor
function TooltipHost(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isTooltipVisible: false,
};
return _this;
}
// Render
TooltipHost.prototype.render = function () {
var _a = this.props, calloutProps = _a.calloutProps, content = _a.content, children = _a.children, directionalHint = _a.directionalHint, delay = _a.delay;
var isTooltipVisible = this.state.isTooltipVisible;
return (React.createElement("div", __assign({ className: Utilities_1.css('ms-TooltipHost', styles.host), ref: this._resolveRef('_tooltipHost') }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._onTooltipMouseLeave }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }),
children,
isTooltipVisible && (React.createElement(Tooltip_1.Tooltip, __assign({ delay: delay, content: content, targetElement: this._tooltipHost, directionalHint: directionalHint, calloutProps: Utilities_1.assign(calloutProps, { onDismiss: this._onTooltipCallOutDismiss }) }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties))))));
};
// Show Tooltip
TooltipHost.prototype._onTooltipMouseEnter = function (ev) {
this.setState({
isTooltipVisible: true
});
};
// Hide Tooltip
TooltipHost.prototype._onTooltipMouseLeave = function (ev) {
this.setState({
isTooltipVisible: false
});
};
// Hide Tooltip
TooltipHost.prototype._onTooltipCallOutDismiss = function () {
this.setState({
isTooltipVisible: false
});
};
return TooltipHost;
}(Utilities_1.BaseComponent));
TooltipHost.defaultProps = {
delay: Tooltip_Props_1.TooltipDelay.medium
};
__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipMouseEnter", null);
__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipMouseLeave", null);
__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipCallOutDismiss", null);
exports.TooltipHost = TooltipHost;
});
//# sourceMappingURL=TooltipHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/Layer", "@uifabric/example-app-base", "./examples/Tooltip.Bottom.Example", "./examples/Tooltip.Basic.Example", "./TooltipPage.scss"], function (require, exports, React, Link_1, Layer_1, example_app_base_1, Tooltip_Bottom_Example_1, Tooltip_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TooltipBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx');
var TooltipBottomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Bottom.Example.tsx');
var TooltipPage = (function (_super) {
__extends(TooltipPage, _super);
function TooltipPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TooltipPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Tooltip', componentName: 'TooltipExample', exampleCards: React.createElement(Layer_1.LayerHost, null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Tooltip with custom gapSpace', code: TooltipBasicExampleCode },
React.createElement(Tooltip_Basic_Example_1.TooltipBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Tooltip Bottom Direction. No delay', code: TooltipBottomExampleCode },
React.createElement(Tooltip_Bottom_Example_1.TooltipBottomExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/components/Tooltip' }, "Tooltips"),
React.createElement("span", null, " supplement content associated with a specific UI component.")) }));
};
return TooltipPage;
}(React.Component));
exports.TooltipPage = TooltipPage;
});
//# sourceMappingURL=TooltipPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = {}; load_themed_styles_1.loadStyles([{ "rawString": ".ms-TooltipExample{margin-top:30px;text-align:center}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=TooltipPage.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 1 | define(["require", "exports", "./Tooltip", "./Tooltip.Props", "./TooltipHost", "../../common/DirectionalHint"], function (require, exports, Tooltip_1, Tooltip_Props_1, TooltipHost_1, DirectionalHint_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Tooltip_1); __export(Tooltip_Props_1); __export(TooltipHost_1); __export(DirectionalHint_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BasePicker.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| BasePicker.js | 3.81% | (9 / 236) | 7.52% | (10 / 133) | 1.85% | (1 / 54) | 4.07% | (9 / 221) | |
| BasePicker.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| PickerItem.Props.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) | |
| PickersPage.js | 26.09% | (6 / 23) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 30% | (6 / 20) | |
| index.js | 15.38% | (2 / 13) | 0% | (0 / 2) | 0% | (0 / 2) | 18.18% | (2 / 11) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=BasePicker.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 | 2 2 2 1 2 2 2 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../Callout", "../../utilities/selection/index", "./Suggestions/Suggestions", "./Suggestions/SuggestionsController", "./AutoFill/BaseAutoFill", "./BasePicker.scss"], function (require, exports, React, Utilities_1, FocusZone_1, Callout_1, index_1, Suggestions_1, SuggestionsController_1, BaseAutoFill_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BasePicker = (function (_super) {
__extends(BasePicker, _super);
function BasePicker(basePickerProps) {
var _this = _super.call(this, basePickerProps) || this;
_this.SuggestionOfProperType = Suggestions_1.Suggestions;
var items = basePickerProps.defaultSelectedItems || [];
_this.suggestionStore = new SuggestionsController_1.SuggestionsController();
_this.selection = new index_1.Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
_this.selection.setItems(items);
_this.state = {
items: items,
suggestedDisplayValue: '',
moreSuggestionsAvailable: false
};
return _this;
}
Object.defineProperty(BasePicker.prototype, "items", {
get: function () {
return this.state.items;
},
enumerable: true,
configurable: true
});
BasePicker.prototype.componentWillUpdate = function (newProps, newState) {
if (newState.items && newState.items !== this.state.items) {
this.selection.setItems(newState.items);
}
};
BasePicker.prototype.componentDidMount = function () {
this.selection.setItems(this.state.items);
};
BasePicker.prototype.focus = function () {
this.focusZone.focus();
};
BasePicker.prototype.dismissSuggestions = function () {
this.setState({ suggestionsVisible: false });
};
BasePicker.prototype.completeSuggestion = function () {
if (this.suggestionStore.hasSelectedSuggestion()) {
this.addItem(this.suggestionStore.currentSuggestion.item);
this.updateValue('');
this.input.clear();
}
};
BasePicker.prototype.render = function () {
var suggestedDisplayValue = this.state.suggestedDisplayValue;
var _a = this.props, className = _a.className, inputProps = _a.inputProps;
return (React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
this.renderItems(),
React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox' }))))),
this.renderSuggestions()));
};
BasePicker.prototype.renderSuggestions = function () {
var TypedSuggestion = this.SuggestionOfProperType;
return this.state.suggestionsVisible ? (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 0, targetElement: this.input.inputElement, onDismiss: this.dismissSuggestions, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge },
React.createElement(TypedSuggestion, __assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, suggestions: this.suggestionStore.getSuggestions(), ref: this._resolveRef('suggestionElement'), onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading }, this.props.pickerSuggestionsProps)))) : (null);
};
BasePicker.prototype.renderItems = function () {
var _this = this;
var onRenderItem = this.props.onRenderItem;
var items = this.state.items;
return items.map(function (item, index) { return onRenderItem({
item: item,
index: index,
key: index + _this._getTextFromItem(item),
selected: _this.selection.isIndexSelected(index),
onRemoveItem: function () { return _this.removeItem(item); },
onItemChange: _this.onItemChange
}); });
};
BasePicker.prototype.resetFocus = function (index) {
var items = this.state.items;
if (items.length) {
var newEl = this.root.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)];
if (newEl) {
this.focusZone.focusElement(newEl);
}
}
else {
this.input.focus();
}
};
BasePicker.prototype.onSuggestionSelect = function () {
if (this.suggestionStore.currentSuggestion) {
var currentValue = this.input.value;
var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
this.setState({ suggestedDisplayValue: itemValue });
}
};
BasePicker.prototype.onSelectionChange = function () {
this.forceUpdate();
};
BasePicker.prototype.updateSuggestions = function (suggestions) {
this.suggestionStore.updateSuggestions(suggestions);
this.forceUpdate();
};
BasePicker.prototype.updateValue = function (updatedValue) {
var _this = this;
var suggestions = this.props.onResolveSuggestions(updatedValue, this.state.items);
var suggestionsArray = suggestions;
var suggestionsPromiseLike = suggestions;
// Check to see if the returned value is an array, if it is then just pass it into the next function.
// If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
if (Array.isArray(suggestionsArray)) {
this.resolveNewValue(updatedValue, suggestionsArray);
}
else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {
if (!this.loadingTimer) {
this.loadingTimer = this._async.setTimeout(function () { return _this.setState({
suggestionsLoading: true
}); }, 500);
}
this.setState({
suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
});
// Ensure that the promise will only use the callback if it was the most recent one.
var promise_1 = this.currentPromise = suggestionsPromiseLike;
promise_1.then(function (newSuggestions) {
if (promise_1 === _this.currentPromise) {
_this.resolveNewValue(updatedValue, newSuggestions);
if (_this.loadingTimer) {
_this._async.clearTimeout(_this.loadingTimer);
_this.loadingTimer = undefined;
}
}
});
}
};
BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) {
this.suggestionStore.updateSuggestions(suggestions);
var itemValue = undefined;
if (this.suggestionStore.currentSuggestion) {
itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);
}
this.setState({
suggestionsLoading: false,
suggestedDisplayValue: itemValue,
suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
});
};
BasePicker.prototype.onChange = function () {
if (this.props.onChange) {
this.props.onChange(this.state.items);
}
};
BasePicker.prototype.onInputChange = function (value) {
this.updateValue(value);
this.setState({ moreSuggestionsAvailable: true });
};
BasePicker.prototype.onSuggestionClick = function (ev, item, index) {
this.addItemByIndex(index);
};
BasePicker.prototype.onInputFocus = function (ev) {
this.selection.setAllSelected(false);
if (this.input.value) {
this.setState({ suggestionsVisible: true });
}
};
BasePicker.prototype.onKeyDown = function (ev) {
var value = this.input.value;
switch (ev.which) {
case Utilities_1.KeyCodes.escape:
if (this.state.suggestionsVisible) {
this.dismissSuggestions();
ev.preventDefault();
ev.stopPropagation();
}
break;
case Utilities_1.KeyCodes.tab:
case Utilities_1.KeyCodes.enter:
if (!ev.shiftKey && value && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
this.completeSuggestion();
ev.preventDefault();
ev.stopPropagation();
}
break;
case Utilities_1.KeyCodes.backspace:
this.onBackspace(ev);
break;
case Utilities_1.KeyCodes.up:
if (ev.target === this.input.inputElement && this.suggestionStore.previousSuggestion() && this.state.suggestionsVisible) {
ev.preventDefault();
ev.stopPropagation();
this.onSuggestionSelect();
}
break;
case Utilities_1.KeyCodes.down:
if (ev.target === this.input.inputElement && this.state.suggestionsVisible) {
if (this.suggestionStore.nextSuggestion()) {
ev.preventDefault();
ev.stopPropagation();
this.onSuggestionSelect();
}
}
break;
}
};
BasePicker.prototype.onItemChange = function (changedItem, index) {
var _this = this;
var items = this.state.items;
if (index >= 0) {
var newItems = items;
newItems[index] = changedItem;
this.setState({ items: newItems }, function () { return _this.onChange(); });
}
};
BasePicker.prototype.onGetMoreResults = function () {
var _this = this;
if (this.props.onGetMoreResults) {
var suggestions = this.props.onGetMoreResults(this.input.value, this.state.items);
var suggestionsArray = suggestions;
var suggestionsPromiseLike = suggestions;
if (Array.isArray(suggestionsArray)) {
this.updateSuggestions(suggestionsArray);
}
else if (suggestionsPromiseLike.then) {
suggestionsPromiseLike.then(function (newSuggestions) { return _this.updateSuggestions(newSuggestions); });
}
}
this.input.focus();
this.setState({ moreSuggestionsAvailable: false });
};
BasePicker.prototype.addItemByIndex = function (index) {
this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item);
this.input.clear();
this.updateValue('');
};
BasePicker.prototype.addItem = function (item) {
var _this = this;
var newItems = this.state.items.concat([item]);
this.setState({ items: newItems }, function () { return _this.onChange(); });
};
BasePicker.prototype.removeItem = function (item) {
var _this = this;
var items = this.state.items;
var index = items.indexOf(item);
if (index >= 0) {
var newItems = items.slice(0, index).concat(items.slice(index + 1));
this.setState({ items: newItems }, function () { return _this.onChange(); });
}
};
BasePicker.prototype.removeItems = function (itemsToRemove) {
var _this = this;
var items = this.state.items;
var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; });
var firstItemToRemove = this.selection.getSelection()[0];
var index = items.indexOf(firstItemToRemove);
this.setState({ items: newItems }, function () {
_this.resetFocus(index);
_this.onChange();
});
};
// This is protected because we may expect the backspace key to work differently in a different kind of picker.
// This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
BasePicker.prototype.onBackspace = function (ev) {
if (this.state.items.length && !this.input.isValueSelected && this.input.cursorLocation === 0) {
if (this.selection.getSelectedCount() > 0) {
this.removeItems(this.selection.getSelection());
}
else {
this.removeItem(this.state.items[this.state.items.length - 1]);
}
}
};
BasePicker.prototype._getTextFromItem = function (item, currentValue) {
if (this.props.getTextFromItem) {
return this.props.getTextFromItem(item, currentValue);
}
else {
return '';
}
};
return BasePicker;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "dismissSuggestions", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onInputChange", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onSuggestionClick", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onInputFocus", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onKeyDown", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onItemChange", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onGetMoreResults", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "addItemByIndex", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "addItem", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "removeItem", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "removeItems", null);
exports.BasePicker = BasePicker;
var BasePickerListBelow = (function (_super) {
__extends(BasePickerListBelow, _super);
function BasePickerListBelow() {
return _super !== null && _super.apply(this, arguments) || this;
}
BasePickerListBelow.prototype.render = function () {
var suggestedDisplayValue = this.state.suggestedDisplayValue;
var _a = this.props, className = _a.className, inputProps = _a.inputProps;
return (React.createElement("div", null,
React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox' }))))),
this.renderSuggestions(),
React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), className: 'ms-BasePicker-selectedItems', isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke }, this.renderItems())));
};
BasePickerListBelow.prototype.onBackspace = function (ev) {
// override the existing backspace method to not do anything because the list items appear below.
};
BasePickerListBelow.prototype._isFocusZoneInnerKeystroke = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.down:
return true;
}
return false;
};
return BasePickerListBelow;
}(BasePicker));
__decorate([
Utilities_1.autobind
], BasePickerListBelow.prototype, "_isFocusZoneInnerKeystroke", null);
exports.BasePickerListBelow = BasePickerListBelow;
});
//# sourceMappingURL=BasePicker.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = { pickerText: 'pickerText_3ad6bbe2', inputFocused: 'inputFocused_3ad6bbe2', pickerInput: 'pickerInput_3ad6bbe2', }; load_themed_styles_1.loadStyles([{ "rawString": ".pickerText_3ad6bbe2{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;box-sizing:border-box;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";min-width:180px;padding:1px;min-height:32px}.pickerText_3ad6bbe2:hover{border-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.pickerText_3ad6bbe2.inputFocused_3ad6bbe2{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.pickerInput_3ad6bbe2{height:26px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;margin:1px}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=BasePicker.scss.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=PickerItem.Props.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "office-ui-fabric-react/lib/Link", "@uifabric/example-app-base", "./examples/Picker.CustomResult.Example", "./examples/TagPicker.Basic.Example"], function (require, exports, React, Link_1, example_app_base_1, Picker_CustomResult_Example_1, TagPicker_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TagPickerExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx');
var PickerCustomResultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx');
var PickersPage = (function (_super) {
__extends(PickersPage, _super);
function PickersPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PickersPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Pickers', componentName: 'PickersExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Tag Picker', code: TagPickerExampleCode },
React.createElement(TagPicker_Basic_Example_1.TagPickerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Custom Picker (Document Picker)', code: PickerCustomResultExampleCode },
React.createElement(Picker_CustomResult_Example_1.PickerCustomResultExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/pickers/BasePicker.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/components/Pickers' }, " Pickers "),
React.createElement("span", null, " are used to pick recipients.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return PickersPage;
}(React.Component));
exports.PickersPage = PickersPage;
});
//# sourceMappingURL=PickersPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 2 1 | define(["require", "exports", "./Suggestions/Suggestions", "./Suggestions/SuggestionsController", "./AutoFill/BaseAutoFill", "./BasePicker", "./PeoplePicker/PeoplePicker", "./TagPicker/TagPicker", "./TagPicker/TagItem"], function (require, exports, Suggestions_1, SuggestionsController_1, BaseAutoFill_1, BasePicker_1, PeoplePicker_1, TagPicker_1, TagItem_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(Suggestions_1); __export(SuggestionsController_1); __export(BaseAutoFill_1); __export(BasePicker_1); __export(PeoplePicker_1); __export(TagPicker_1); __export(TagItem_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| AppDefinition.js | 3.51% | (2 / 57) | 50% | (3 / 6) | 0% | (0 / 48) | 3.64% | (2 / 55) | |
| ColorStyles.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| GettingStartedPage.js | 28.57% | (6 / 21) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 33.33% | (6 / 18) | |
| GettingStartedPage.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) | |
| index.js | 16.67% | (6 / 36) | 0% | (0 / 16) | 0% | (0 / 10) | 17.14% | (6 / 35) | |
| index.scss.js | 25% | (1 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 25% | (1 / 4) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 | 2 2 | var __assign = (this && this.__assign) || Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; define(["require", "exports", "react", "@uifabric/example-app-base", "../components/DetailsList/examples/DetailsList.Basic.Example"], function (require, exports, React, example_app_base_1, DetailsList_Basic_Example_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.AppDefinition = { appTitle: 'Fabric - React', testPages: [ { component: DetailsList_Basic_Example_1.DetailsListBasicExample, key: 'DetailsListBasicExample', name: 'DetailsListBasicExample', url: '#/tests/detailslistbasicexample' } ], examplePages: [ { links: [ { getComponent: function (cb) { return cb(require('../components/Breadcrumb/BreadcrumbPage').BreadcrumbPage); }, key: 'Breadcrumb', name: 'Breadcrumb', url: '#/examples/breadcrumb' }, { getComponent: function (cb) { return cb(require('../components/Button/ButtonPage').ButtonPage); }, key: 'Button', name: 'Button', url: '#/examples/button' }, { getComponent: function (cb) { return cb(require('../components/Calendar/CalendarPage').CalendarPage); }, key: 'Calendar', name: 'Calendar', url: '#/examples/calendar' }, { getComponent: function (cb) { return cb(require('../components/Callout/CalloutPage').CalloutPage); }, key: 'Callout', name: 'Callout', url: '#/examples/callout' }, { getComponent: function (cb) { return cb(require('../components/Checkbox/CheckboxPage').CheckboxPage); }, key: 'Checkbox', name: 'Checkbox', url: '#/examples/checkbox' }, { getComponent: function (cb) { return cb(require('../components/ChoiceGroup/ChoiceGroupPage').ChoiceGroupPage); }, key: 'ChoiceGroup', name: 'ChoiceGroup', url: '#/examples/choicegroup' }, { getComponent: function (cb) { return cb(require('../components/CommandBar/CommandBarPage').CommandBarPage); }, key: 'CommandBar', name: 'CommandBar', url: '#/examples/commandbar' }, { getComponent: function (cb) { return cb(require('../components/ContextualMenu/ContextualMenuPage').ContextualMenuPage); }, key: 'ContextualMenu', name: 'ContextualMenu', url: '#/examples/contextmenu' }, { getComponent: function (cb) { return cb(require('../components/DatePicker/DatePickerPage').DatePickerPage); }, key: 'DatePicker', name: 'DatePicker', url: '#/examples/datepicker' }, { getComponent: function (cb) { return cb(require('../components/DetailsList/DetailsListPage').DetailsListPage); }, key: 'DetailsList', name: 'DetailsList', url: '#/examples/detailslist' }, { getComponent: function (cb) { return cb(require('../components/Dialog/DialogPage').DialogPage); }, key: 'Dialog', name: 'Dialog', url: '#/examples/dialog' }, { getComponent: function (cb) { return cb(require('../components/DocumentCard/DocumentCardPage').DocumentCardPage); }, key: 'DocumentCard', name: 'DocumentCard', url: '#/examples/documentcard' }, { getComponent: function (cb) { return cb(require('../components/Dropdown/DropdownPage').DropdownPage); }, key: 'Dropdown', name: 'Dropdown', url: '#/examples/dropdown' }, { getComponent: function (cb) { return cb(require('../components/Facepile/FacepilePage').FacepilePage); }, key: 'Facepile', name: 'Facepile', url: '#/examples/facepile' }, { getComponent: function (cb) { return cb(require('../components/Icon/IconPage').IconPage); }, key: 'Icon', name: 'Icon', url: '#/examples/icon' }, { getComponent: function (cb) { return cb(require('../components/Label/LabelPage').LabelPage); }, key: 'Label', name: 'Label', url: '#/examples/label' }, { getComponent: function (cb) { return cb(require('../components/Link/LinkPage').LinkPage); }, key: 'Link', name: 'Link', url: '#/examples/link' }, { getComponent: function (cb) { return cb(require('../components/List/ListPage').ListPage); }, key: 'List', name: 'List', url: '#/examples/list' }, { getComponent: function (cb) { return cb(require('../components/MessageBar/MessageBarPage').MessageBarPage); }, key: 'MessageBar', name: 'MessageBar', url: '#/examples/messagebar' }, { getComponent: function (cb) { return cb(require('../components/Modal/ModalPage').ModalPage); }, key: 'Modal', name: 'Modal', url: '#/examples/modal' }, { getComponent: function (cb) { return cb(require('../components/Overlay/OverlayPage').OverlayPage); }, key: 'Overlay', name: 'Overlay', url: '#/examples/overlay' }, { getComponent: function (cb) { return cb(require('../components/Panel/PanelPage').PanelPage); }, key: 'Panel', name: 'Panel', url: '#/examples/panel' }, { getComponent: function (cb) { return cb(require('../components/pickers/PickersPage').PickersPage); }, key: 'Pickers', name: 'Pickers', url: '#/examples/pickers' }, { getComponent: function (cb) { return cb(require('../components/pickers/PeoplePicker/PeoplePickerPage').PeoplePickerPage); }, key: 'PeoplePicker', name: 'PeoplePicker', url: '#/examples/PeoplePicker' }, { getComponent: function (cb) { return cb(require('../components/Persona/PersonaPage').PersonaPage); }, key: 'Persona', name: 'Persona', url: '#/examples/persona' }, { getComponent: function (cb) { return cb(require('../components/Pivot/PivotPage').PivotPage); }, key: 'Pivot', name: 'Pivot', url: '#/examples/pivot' }, { getComponent: function (cb) { return cb(require('../components/ProgressIndicator/ProgressIndicatorPage').ProgressIndicatorPage); }, key: 'ProgressIndicator', name: 'ProgressIndicator', url: '#/examples/progressindicator' }, { getComponent: function (cb) { return cb(require('../components/Rating/RatingPage').RatingPage); }, key: 'Rating', name: 'Rating', url: '#/examples/rating' }, { getComponent: function (cb) { return cb(require('../components/SearchBox/SearchBoxPage').SearchBoxPage); }, key: 'SearchBox', name: 'SearchBox', url: '#/examples/searchbox' }, { getComponent: function (cb) { return cb(require('../components/Spinner/SpinnerPage').SpinnerPage); }, key: 'Spinner', name: 'Spinner', url: '#/examples/spinner' }, { getComponent: function (cb) { return cb(require('../components/TeachingBubble/TeachingBubblePage').TeachingBubblePage); }, key: 'TeachingBubble', name: 'TeachingBubble', url: '#/examples/teachingbubble' }, { getComponent: function (cb) { return cb(require('../components/TextField/TextFieldPage').TextFieldPage); }, key: 'TextField', name: 'TextField', url: '#/examples/textfield' }, { getComponent: function (cb) { return cb(require('../components/Toggle/TogglePage').TogglePage); }, key: 'Toggle', name: 'Toggle', url: '#/examples/toggle' }, { getComponent: function (cb) { return cb(require('../components/Tooltip/TooltipPage').TooltipPage); }, key: 'Tooltip', name: 'Tooltip', url: '#/examples/Tooltip' } ], name: 'Basic components' }, { links: [ { getComponent: function (cb) { return cb(require('../components/ColorPicker/ColorPickerPage').ColorPickerPage); }, key: 'ColorPicker', name: 'ColorPicker', url: '#/examples/colorpicker' }, { getComponent: function (cb) { return cb(require('../components/GroupedList/GroupedListPage').GroupedListPage); }, key: 'GroupedList', name: 'GroupedList', url: '#examples/groupedlist' }, { getComponent: function (cb) { return cb(require('../components/Image/ImagePage').ImagePage); }, key: 'Image', name: 'Image', url: '#/examples/image' }, { getComponent: function (cb) { return cb(require('../components/Layer/LayerPage').LayerPage); }, key: 'Layer', name: 'Layer', url: '#/examples/layer' }, { getComponent: function (cb) { return cb(require('../components/Nav/NavPage').NavPage); }, key: 'Nav', name: 'Nav', url: '#/examples/nav' }, { getComponent: function (cb) { return cb(require('../components/Slider/SliderPage').SliderPage); }, key: 'Slider', name: 'Slider', url: '#/examples/slider' } ], name: 'Extended components' }, { links: [ { getComponent: function (cb) { return cb(require('../components/FocusTrapZone/FocusTrapZonePage').FocusTrapZonePage); }, key: 'FocusTrapZone', name: 'FocusTrapZone', url: '#examples/focustrapzone' }, { getComponent: function (cb) { return cb(require('../components/FocusZone/FocusZonePage').FocusZonePage); }, key: 'FocusZone', name: 'FocusZone', url: '#examples/focuszone' }, { getComponent: function (cb) { return cb(require('../components/MarqueeSelection/MarqueeSelectionPage').MarqueeSelectionPage); }, key: 'MarqueeSelection', name: 'MarqueeSelection', url: '#examples/marqueeselection' }, { getComponent: function (cb) { return cb(require('../utilities/selection/SelectionPage').SelectionPage); }, key: 'Selection', name: 'Selection', url: '#examples/selection' }, { getComponent: function (cb) { return cb(require('../components/Theme/ThemePage').ThemePage); }, key: 'Theme', name: 'Themes', url: '#examples/themes' } ], name: 'Utilities' } ], headerLinks: [ { name: 'Getting started', url: '#/' }, { name: 'Fabric', url: 'http://dev.office.com/fabric' }, { name: 'Github', url: 'http://www.github.com/officedev' } ] }; exports.App = function (props) { return React.createElement(example_app_base_1.App, __assign({ appDefinition: exports.AppDefinition }, props)); }; }); //# sourceMappingURL=AppDefinition.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = {}; load_themed_styles_1.loadStyles([{ "rawString": ".hljs{background:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.hljs-comment,.hljs-quote{color:#777}.hljs-built_in,.hljs-builtin-name,.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-regexp,.hljs-symbol,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ab875d}.hljs-attribute,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-title,.hljs-type{color:#9b869b}.hljs-addition,.hljs-keyword,.hljs-selector-tag,.hljs-string{color:#8f9c6c}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=ColorStyles.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "office-ui-fabric-react/lib/Link", "@uifabric/example-app-base", "./GettingStartedPage.scss"], function (require, exports, React, Link_1, example_app_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GettingStartedPage = (function (_super) {
__extends(GettingStartedPage, _super);
function GettingStartedPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
GettingStartedPage.prototype.render = function () {
return (React.createElement("div", { className: 'ms-GettingStartedPage' },
React.createElement("div", { className: 'ms-GettingStartedPage-banner' },
React.createElement("h1", null, "office-ui-fabric-react"),
React.createElement("h3", null, "A library of reusable, generic React components")),
React.createElement("h2", null, "Overview"),
React.createElement("p", null, "Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over."),
React.createElement("p", null, "Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need."),
React.createElement("h2", null, "Getting started"),
React.createElement("p", null, "Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as ",
React.createElement(Link_1.Link, { href: 'https://webpack.github.io/', target: '_blank' }, "Webpack"), " which can resolve NPM package imports in your code and can bundle the specific things you import."),
React.createElement("p", null, "Within an npm project, you should install the package and save it as a dependency:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'bash' }, "npm install --save office-ui-fabric-react")),
React.createElement("p", null, "This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react."),
React.createElement("p", null, "The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { DefaultButton } from 'office-ui-fabric-react/lib/Button';\n\nconst MyPage = () => (<div><DefaultButton>I am a button.</DefaultButton></div>);\n\nReactDOM.render(<MyPage />, document.body.firstChild);")),
React.createElement("h2", null, "Notes on module vs path-based imports"),
React.createElement("p", null, "While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, "import { Button } from 'office-ui-fabric-react';")),
React.createElement("p", null, "...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles and slows your page load down. Instead you can import the specific paths to trim down your bundle size:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, "import { Button } from 'office-ui-fabric-react/lib/Button';\nimport { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';\nimport { List } from 'office-ui-fabric-react/lib/List';")),
React.createElement("h2", null, "Using an AMD bundler like r.js"),
React.createElement("p", null, "\n If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location.\n ")));
};
return GettingStartedPage;
}(React.Component));
exports.GettingStartedPage = GettingStartedPage;
});
//# sourceMappingURL=GettingStartedPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = {}; load_themed_styles_1.loadStyles([{ "rawString": ".ms-GettingStartedPage{margin-top:-20px;padding:40px}.ms-GettingStartedPage h1{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:28px;font-weight:100}.ms-GettingStartedPage h2{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100}.ms-GettingStartedPage h3{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300}.ms-GettingStartedPage-banner{padding:1px 20px;margin:-20px;margin-bottom:20px;border-bottom:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.ms-GettingStartedPage-banner h1{margin-bottom:0}.ms-GettingStartedPage-banner h3{margin-top:0}@media (max-width:1023px){.ms-GettingStartedPage-banner{margin:-20px 0;margin-bottom:20px}}.ms-GettingStartedPage-code{background:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";padding:20px}.ms-GettingStartedPage-code pre{margin:0}.ms-GettingStartedPage-code .hljs{background:inherit;padding:0}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=GettingStartedPage.scss.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 1 1 1 1 1 | define(["require", "exports", "react", "react-dom", "./AppDefinition", "office-ui-fabric-react/lib/utilities/router/index", "./GettingStartedPage", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Fabric", "./index.scss", "./ColorStyles.scss"], function (require, exports, React, ReactDOM, AppDefinition_1, index_1, GettingStartedPage_1, Utilities_1, Fabric_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Utilities_1.setBaseUrl('./dist/'); var rootElement; // Return the anchor link from the URL without the hash function _extractAnchorLink(path) { var index = path.lastIndexOf('#'); if (index >= 0) { path = path.substr(index + 1, path.length - index); } return path; } function _scrollAnchorLink() { if ((window.location.hash.match(/#/g) || []).length > 1) { var anchor = _extractAnchorLink(window.location.hash); document.getElementById(anchor).scrollIntoView(); } } function _onLoad() { rootElement = rootElement || document.getElementById('content'); ReactDOM.render(React.createElement(Fabric_1.Fabric, null, React.createElement(index_1.Router, { onNewRouteLoaded: _scrollAnchorLink }, _getRoutes())), rootElement); } function _getRoutes() { var routes = AppDefinition_1.AppDefinition.testPages.map(function (page) { return React.createElement(index_1.Route, { key: page.key, path: page.url, component: page.component }); }); var appRoutes = []; AppDefinition_1.AppDefinition.examplePages.forEach(function (group) { group.links .filter(function (link) { return link.hasOwnProperty('component') || link.hasOwnProperty('getComponent'); }) .forEach(function (link, linkIndex) { var component = link.component, getComponent = link.getComponent; appRoutes.push(React.createElement(index_1.Route, { key: link.key, path: link.url, component: component, getComponent: getComponent })); }); }); // Default route. appRoutes.push(React.createElement(index_1.Route, { key: 'gettingstarted', component: GettingStartedPage_1.GettingStartedPage })); routes.push(React.createElement(index_1.Route, { key: 'app', component: AppDefinition_1.App }, appRoutes)); return routes; } function _onUnload() { if (rootElement) { ReactDOM.unmountComponentAtNode(rootElement); } } var isReady = document.readyState === 'interactive' || document.readyState === 'complete'; if (isReady) { _onLoad(); } else { window.onload = _onLoad; } window.onunload = _onUnload; }); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 | 2 | define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) { "use strict"; var styles = {}; load_themed_styles_1.loadStyles([{ "rawString": "body,html{-webkit-tap-highlight-color:transparent}" }]); return styles; }); /* tslint:enable */ //# sourceMappingURL=index.scss.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| positioning.js | 10% | (31 / 310) | 0% | (0 / 141) | 0% | (0 / 34) | 10.1% | (31 / 307) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 | 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | define(["require", "exports", "../common/DirectionalHint", "../Utilities"], function (require, exports, DirectionalHint_1, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var RectangleEdge; (function (RectangleEdge) { RectangleEdge[RectangleEdge["top"] = 0] = "top"; RectangleEdge[RectangleEdge["bottom"] = 1] = "bottom"; RectangleEdge[RectangleEdge["left"] = 2] = "left"; RectangleEdge[RectangleEdge["right"] = 3] = "right"; })(RectangleEdge = exports.RectangleEdge || (exports.RectangleEdge = {})); var SLIDE_ANIMATIONS = (_a = {}, _a[RectangleEdge.top] = 'slideUpIn20', _a[RectangleEdge.bottom] = 'slideDownIn20', _a[RectangleEdge.left] = 'slideLeftIn20', _a[RectangleEdge.right] = 'slideRightIn20', _a); var PositionData = (function () { function PositionData(calloutDirection, targetDirection, calloutPercent, targetPercent, beakPercent, isAuto) { this.calloutDirection = calloutDirection; this.targetDirection = targetDirection; this.calloutPercent = calloutPercent; this.targetPercent = targetPercent; this.beakPercent = beakPercent; this.isAuto = isAuto; } return PositionData; }()); exports.PositionData = PositionData; // Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target var DirectionalDictionary = (_b = {}, _b[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 100, 100, 50, false), _b[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, true), _b[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 100, 100, 50, false), _b[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, true), _b[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.right, RectangleEdge.left, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 100, 100, 50, false), _b[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.left, RectangleEdge.right, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 100, 100, 50, false), _b); var CoverDictionary = (_c = {}, _c[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.top, RectangleEdge.top, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 100, 100, 50, false), _c[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, true), _c[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 100, 100, 50, false), _c[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, true), _c[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.left, RectangleEdge.left, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 100, 100, 50, false), _c[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.right, RectangleEdge.right, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 100, 100, 50, false), _c); var OppositeEdgeDictionary = (_d = {}, _d[RectangleEdge.top] = RectangleEdge.bottom, _d[RectangleEdge.bottom] = RectangleEdge.top, _d[RectangleEdge.right] = RectangleEdge.left, _d[RectangleEdge.left] = RectangleEdge.right, _d); function getRelativePositions(props, hostElement, calloutElement) { var beakWidth = !props.isBeakVisible ? 0 : props.beakWidth; var borderWidth = positioningFunctions._getBorderSize(calloutElement); var gap = positioningFunctions._calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0); var boundingRect = props.bounds ? positioningFunctions._getRectangleFromIRect(props.bounds) : new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight); var targetRect = props.target ? positioningFunctions._getTargetRect(boundingRect, props.target) : positioningFunctions._getTargetRectDEPRECATED(boundingRect, props.targetElement, props.creationEvent, props.targetPoint, props.useTargetPoint); var positionData = positioningFunctions._getPositionData(props.directionalHint, targetRect, boundingRect, props.coverTarget); var positionedCallout = positioningFunctions._positionCalloutWithinBounds(positioningFunctions._getRectangleFromHTMLElement(calloutElement), targetRect, boundingRect, positionData, gap, props.coverTarget, props.directionalHintFixed); var beakPositioned = positioningFunctions._positionBeak(beakWidth, positionedCallout, targetRect, borderWidth); var finalizedCallout = positioningFunctions._finalizeCalloutPosition(positionedCallout.calloutRectangle, hostElement); return { calloutPosition: { top: finalizedCallout.top, left: finalizedCallout.left }, beakPosition: { top: beakPositioned.top, left: beakPositioned.left, display: 'block' }, directionalClassName: SLIDE_ANIMATIONS[positionedCallout.targetEdge], submenuDirection: positionedCallout.calloutEdge === RectangleEdge.right ? DirectionalHint_1.DirectionalHint.leftBottomEdge : DirectionalHint_1.DirectionalHint.rightBottomEdge }; } exports.getRelativePositions = getRelativePositions; /** * Get's the maximum height that a rectangle can have in order to fit below or above a target. * If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder * of the target given. * If no bounds are provided then the window is treated as the bounds. */ function getMaxHeight(target, targetEdge, gapSpace, bounds) { if (gapSpace === void 0) { gapSpace = 0; } var mouseTarget = target; var elementTarget = target; var targetRect; var boundingRectangle = bounds ? positioningFunctions._getRectangleFromIRect(bounds) : new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight); if (mouseTarget.stopPropagation) { targetRect = new Utilities_1.Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY); } else { targetRect = positioningFunctions._getRectangleFromHTMLElement(elementTarget); } return positioningFunctions._getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle); } exports.getMaxHeight = getMaxHeight; var positioningFunctions; (function (positioningFunctions) { /** * If max height is less than zero it returns the bounds height instead. */ function _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds) { var maxHeight = 0; switch (targetEdge) { case DirectionalHint_1.DirectionalHint.bottomAutoEdge: case DirectionalHint_1.DirectionalHint.bottomCenter: case DirectionalHint_1.DirectionalHint.bottomLeftEdge: case DirectionalHint_1.DirectionalHint.bottomRightEdge: maxHeight = bounds.bottom - targetRectangle.bottom - gapSpace; break; case DirectionalHint_1.DirectionalHint.topAutoEdge: case DirectionalHint_1.DirectionalHint.topCenter: case DirectionalHint_1.DirectionalHint.topLeftEdge: case DirectionalHint_1.DirectionalHint.topRightEdge: maxHeight = targetRectangle.top - bounds.top - gapSpace; break; default: maxHeight = bounds.bottom - targetRectangle.top - gapSpace; break; } return maxHeight > 0 ? maxHeight : bounds.height; } positioningFunctions._getMaxHeightFromTargetRectangle = _getMaxHeightFromTargetRectangle; function _getTargetRect(bounds, target) { var targetRectangle; if (target.preventDefault) { var ev = target; targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY); } else { targetRectangle = _getRectangleFromHTMLElement(target); } if (!_isRectangleWithinBounds(targetRectangle, bounds)) { var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds); for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) { var direction = outOfBounds_1[_i]; targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]]; } } return targetRectangle; } positioningFunctions._getTargetRect = _getTargetRect; function _getTargetRectDEPRECATED(bounds, targetElement, ev, targetPoint, isTargetPoint) { var targetRectangle; if (isTargetPoint) { if (targetPoint) { targetRectangle = new Utilities_1.Rectangle(targetPoint.x, targetPoint.x, targetPoint.y, targetPoint.y); } else { targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY); } } else { if (!targetElement) { if (ev && ev.target) { targetRectangle = _getRectangleFromHTMLElement(ev.target); } targetRectangle = new Utilities_1.Rectangle(); } else { targetRectangle = _getRectangleFromHTMLElement(targetElement); } } if (!_isRectangleWithinBounds(targetRectangle, bounds)) { var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds); for (var _i = 0, outOfBounds_2 = outOfBounds; _i < outOfBounds_2.length; _i++) { var direction = outOfBounds_2[_i]; targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]]; } } return targetRectangle; } positioningFunctions._getTargetRectDEPRECATED = _getTargetRectDEPRECATED; function _getRectangleFromHTMLElement(element) { var clientRect = element.getBoundingClientRect(); return new Utilities_1.Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom); } positioningFunctions._getRectangleFromHTMLElement = _getRectangleFromHTMLElement; function _positionCalloutWithinBounds(calloutRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) { if (gap === void 0) { gap = 0; } var estimatedRectangle = _moveRectangleToAnchorRectangle(calloutRectangle, directionalInfo.calloutDirection, directionalInfo.calloutPercent, targetRectangle, directionalInfo.targetDirection, directionalInfo.targetPercent, gap); if (_isRectangleWithinBounds(estimatedRectangle, boundingRectangle)) { return { calloutRectangle: estimatedRectangle, calloutEdge: directionalInfo.calloutDirection, targetEdge: directionalInfo.targetDirection, alignPercent: directionalInfo.calloutPercent, beakPercent: directionalInfo.beakPercent }; } else { return _getBestRectangleFitWithinBounds(estimatedRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed); } } positioningFunctions._positionCalloutWithinBounds = _positionCalloutWithinBounds; function _getBestRectangleFitWithinBounds(estimatedPosition, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) { var callout = { calloutRectangle: estimatedPosition, calloutEdge: directionalInfo.calloutDirection, targetEdge: directionalInfo.targetDirection, alignPercent: directionalInfo.calloutPercent, beakPercent: directionalInfo.beakPercent }; // If it can't possibly fit within the bounds just put it into it's initial position. if (!_canRectangleFitWithinBounds(estimatedPosition, boundingRectangle)) { return callout; } if (!coverTarget && !directionalHintFixed) { callout = _flipRectangleToFit(callout, targetRectangle, directionalInfo.targetPercent, boundingRectangle, gap); } var outOfBounds = _getOutOfBoundsEdges(callout.calloutRectangle, boundingRectangle); for (var _i = 0, outOfBounds_3 = outOfBounds; _i < outOfBounds_3.length; _i++) { var direction = outOfBounds_3[_i]; callout.calloutRectangle = _alignEdgeToCoordinate(callout.calloutRectangle, boundingRectangle[RectangleEdge[direction]], direction); var adjustedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.targetEdge, targetRectangle, callout.targetEdge, directionalInfo.targetPercent); callout.alignPercent = adjustedPercent; } return callout; } positioningFunctions._getBestRectangleFitWithinBounds = _getBestRectangleFitWithinBounds; function _positionBeak(beakWidth, callout, targetRectangle, border) { var calloutRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, 0, callout.calloutRectangle.height - border * 2); var beakRectangle = new Utilities_1.Rectangle(0, beakWidth, 0, beakWidth); var recalculatedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.calloutEdge, targetRectangle, callout.targetEdge, callout.beakPercent); var estimatedTargetPoint = _getPointOnEdgeFromPercent(calloutRect, callout.calloutEdge, recalculatedPercent); return _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border); } positioningFunctions._positionBeak = _positionBeak; function _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border) { var beakPixelSize = _calculateActualBeakWidthInPixels(beakRectangle.width) / 2; var innerRect = null; var beakPoint = { x: beakRectangle.width / 2, y: beakRectangle.width / 2 }; if (callout.calloutEdge === RectangleEdge.bottom || callout.calloutEdge === RectangleEdge.top) { innerRect = new Utilities_1.Rectangle(beakPixelSize, callout.calloutRectangle.width - beakPixelSize - border * 2, 0, callout.calloutRectangle.height - border * 2); } else { innerRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, beakPixelSize, callout.calloutRectangle.height - beakPixelSize - border * 2); } var finalPoint = _getClosestPointOnEdgeToPoint(innerRect, callout.calloutEdge, estimatedTargetPoint); return _movePointOnRectangleToPoint(beakRectangle, beakPoint, finalPoint); } positioningFunctions._finalizeBeakPosition = _finalizeBeakPosition; function _getRectangleFromIRect(rect) { return new Utilities_1.Rectangle(rect.left, rect.right, rect.top, rect.bottom); } positioningFunctions._getRectangleFromIRect = _getRectangleFromIRect; function _finalizeCalloutPosition(calloutRectangle, hostElement) { var hostRect = _getRectangleFromHTMLElement(hostElement); var topPosition = calloutRectangle.top - hostRect.top; var leftPosition = calloutRectangle.left - hostRect.left; return new Utilities_1.Rectangle(leftPosition, leftPosition + calloutRectangle.width, topPosition, topPosition + calloutRectangle.height); } positioningFunctions._finalizeCalloutPosition = _finalizeCalloutPosition; /** * Finds the percent on the recalculateRect that matches the percent on the target rect based on position. */ function _recalculateMatchingPercents(recalculateRect, rectangleEdge, targetRect, targetEdge, targetPercent) { var targetPoint = _getPointOnEdgeFromPercent(targetRect, targetEdge, targetPercent); var adjustedPoint = _getClosestPointOnEdgeToPoint(recalculateRect, rectangleEdge, targetPoint); var adjustedPercent = _getPercentOfEdgeFromPoint(recalculateRect, rectangleEdge, adjustedPoint); if (adjustedPercent > 100) { adjustedPercent = 100; } else if (adjustedPercent < 0) { adjustedPercent = 0; } return adjustedPercent; } positioningFunctions._recalculateMatchingPercents = _recalculateMatchingPercents; function _canRectangleFitWithinBounds(rect, boundingRect) { if (rect.width > boundingRect.width || rect.height > boundingRect.height) { return false; } return true; } positioningFunctions._canRectangleFitWithinBounds = _canRectangleFitWithinBounds; function _isRectangleWithinBounds(rect, boundingRect) { if (rect.top < boundingRect.top) { return false; } if (rect.bottom > boundingRect.bottom) { return false; } if (rect.left < boundingRect.left) { return false; } if (rect.right > boundingRect.right) { return false; } return true; } positioningFunctions._isRectangleWithinBounds = _isRectangleWithinBounds; /** * Gets all of the edges of a rectangle that are outside of the given bounds. * If there are no out of bounds edges it returns an empty array. */ function _getOutOfBoundsEdges(rect, boundingRect) { var outOfBounds = new Array(); if (rect.top < boundingRect.top) { outOfBounds.push(RectangleEdge.top); } if (rect.bottom > boundingRect.bottom) { outOfBounds.push(RectangleEdge.bottom); } if (rect.left < boundingRect.left) { outOfBounds.push(RectangleEdge.left); } if (rect.right > boundingRect.right) { outOfBounds.push(RectangleEdge.right); } return outOfBounds; } positioningFunctions._getOutOfBoundsEdges = _getOutOfBoundsEdges; /** * Returns a point on a edge that is x% of the way down it. */ function _getPointOnEdgeFromPercent(rect, direction, percentOfRect) { var startPoint; var endPoint; switch (direction) { case RectangleEdge.top: startPoint = { x: rect.left, y: rect.top }; endPoint = { x: rect.right, y: rect.top }; break; case RectangleEdge.left: startPoint = { x: rect.left, y: rect.top }; endPoint = { x: rect.left, y: rect.bottom }; break; case RectangleEdge.right: startPoint = { x: rect.right, y: rect.top }; endPoint = { x: rect.right, y: rect.bottom }; break; case RectangleEdge.bottom: startPoint = { x: rect.left, y: rect.bottom }; endPoint = { x: rect.right, y: rect.bottom }; break; default: startPoint = { x: 0, y: 0 }; endPoint = { x: 0, y: 0 }; break; } return _calculatePointPercentAlongLine(startPoint, endPoint, percentOfRect); } positioningFunctions._getPointOnEdgeFromPercent = _getPointOnEdgeFromPercent; /** * Gets the percent down an edge that a point appears. */ function _getPercentOfEdgeFromPoint(rect, direction, valueOnEdge) { switch (direction) { case RectangleEdge.top: case RectangleEdge.bottom: return rect.width !== 0 ? (valueOnEdge.x - rect.left) / rect.width * 100 : 100; case RectangleEdge.left: case RectangleEdge.right: return rect.height !== 0 ? (valueOnEdge.y - rect.top) / rect.height * 100 : 100; } } positioningFunctions._getPercentOfEdgeFromPoint = _getPercentOfEdgeFromPoint; /** * Percent is based on distance from left to right or up to down. 0% would be left most, 100% would be right most. */ function _calculatePointPercentAlongLine(startPoint, endPoint, percent) { var x = startPoint.x + ((endPoint.x - startPoint.x) * percent / 100); var y = startPoint.y + ((endPoint.y - startPoint.y) * percent / 100); return { x: x, y: y }; } positioningFunctions._calculatePointPercentAlongLine = _calculatePointPercentAlongLine; function _moveTopLeftOfRectangleToPoint(rect, destination) { return new Utilities_1.Rectangle(destination.x, destination.x + rect.width, destination.y, destination.y + rect.height); } positioningFunctions._moveTopLeftOfRectangleToPoint = _moveTopLeftOfRectangleToPoint; /** * Aligns the given edge to the target coordinate. */ function _alignEdgeToCoordinate(rect, coordinate, direction) { switch (direction) { case RectangleEdge.top: return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate }); case RectangleEdge.bottom: return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate - rect.height }); case RectangleEdge.left: return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate, y: rect.top }); case RectangleEdge.right: return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate - rect.width, y: rect.top }); } return new Utilities_1.Rectangle(); } positioningFunctions._alignEdgeToCoordinate = _alignEdgeToCoordinate; /** * Moves a point on a given rectangle to the target point. Does not change the rectangles orientation. */ function _movePointOnRectangleToPoint(rect, rectanglePoint, targetPoint) { var leftCornerXDifference = rectanglePoint.x - rect.left; var leftCornerYDifference = rectanglePoint.y - rect.top; return _moveTopLeftOfRectangleToPoint(rect, { x: targetPoint.x - leftCornerXDifference, y: targetPoint.y - leftCornerYDifference }); } positioningFunctions._movePointOnRectangleToPoint = _movePointOnRectangleToPoint; /** * Moves the given rectangle a certain number of pixels in the given direction; */ function _moveRectangleInDirection(rect, moveDistance, direction) { var xModifier = 0; var yModifier = 0; switch (direction) { case RectangleEdge.top: yModifier = moveDistance * -1; break; case RectangleEdge.left: xModifier = moveDistance * -1; break; case RectangleEdge.right: xModifier = moveDistance; break; case RectangleEdge.bottom: yModifier = moveDistance; break; } return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left + xModifier, y: rect.top + yModifier }); } positioningFunctions._moveRectangleInDirection = _moveRectangleInDirection; /** * Moves the given rectangle to an anchor rectangle. */ function _moveRectangleToAnchorRectangle(rect, rectSide, rectPercent, anchorRect, anchorSide, anchorPercent, gap) { if (gap === void 0) { gap = 0; } var rectTargetPoint = _getPointOnEdgeFromPercent(rect, rectSide, rectPercent); var anchorTargetPoint = _getPointOnEdgeFromPercent(anchorRect, anchorSide, anchorPercent); var positionedRect = _movePointOnRectangleToPoint(rect, rectTargetPoint, anchorTargetPoint); return _moveRectangleInDirection(positionedRect, gap, anchorSide); } positioningFunctions._moveRectangleToAnchorRectangle = _moveRectangleToAnchorRectangle; /** * Gets the closet point on an edge to the given point. */ function _getClosestPointOnEdgeToPoint(rect, edge, point) { switch (edge) { case RectangleEdge.top: case RectangleEdge.bottom: var x = void 0; if (point.x > rect.right) { x = rect.right; } else if (point.x < rect.left) { x = rect.left; } else { x = point.x; } return { x: x, y: rect[RectangleEdge[edge]] }; case RectangleEdge.left: case RectangleEdge.right: var y = void 0; if (point.y > rect.bottom) { y = rect.bottom; } else if (point.y < rect.top) { y = rect.top; } else { y = point.y; } return { x: rect[RectangleEdge[edge]], y: y }; } } positioningFunctions._getClosestPointOnEdgeToPoint = _getClosestPointOnEdgeToPoint; // Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal. // We still want to position the beak based on it's midpoint which does not change. It will // be at (beakwidth / 2, beakwidth / 2) function _calculateActualBeakWidthInPixels(beakWidth) { return Math.sqrt(beakWidth * beakWidth * 2); } positioningFunctions._calculateActualBeakWidthInPixels = _calculateActualBeakWidthInPixels; function _getBorderSize(element) { var styles = getComputedStyle(element, null); var topBorder = parseFloat(styles.borderTopWidth); var bottomBorder = parseFloat(styles.borderBottomWidth); var leftBorder = parseFloat(styles.borderLeftWidth); var rightBorder = parseFloat(styles.borderRightWidth); // If any of the borders are NaN default to 0 if (isNaN(topBorder) || isNaN(bottomBorder) || isNaN(leftBorder) || isNaN(rightBorder)) { return 0; } // If all of the borders are the same size, any value; if (topBorder === bottomBorder && bottomBorder === leftBorder && leftBorder === rightBorder) { return topBorder; } // If the borders do not agree, return 0 return 0; } positioningFunctions._getBorderSize = _getBorderSize; function _getPositionData(direction, target, boundingRect, coverTarget) { var directionalInfo = coverTarget ? CoverDictionary[direction] : DirectionalDictionary[direction]; if (directionalInfo.isAuto) { var center = _getPointOnEdgeFromPercent(target, directionalInfo.targetDirection, 50); if (center.x <= boundingRect.width / 2) { directionalInfo.calloutPercent = 0; directionalInfo.targetPercent = 0; } else { directionalInfo.calloutPercent = 100; directionalInfo.targetPercent = 100; } } return directionalInfo; } positioningFunctions._getPositionData = _getPositionData; function _flipRectangleToFit(callout, targetRect, targetPercent, boundingRect, gap) { var directions = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.top, RectangleEdge.bottom]; var currentEdge = callout.targetEdge; // Make a copy to presever the original positioning. var positionedCallout = Utilities_1.assign({}, callout); // Keep switching sides until one is found with enough space. If all sides don't fit then return the unmodified callout. for (var i = 0; i < 4; i++) { var outOfBounds = _getOutOfBoundsEdges(positionedCallout.calloutRectangle, boundingRect); var index = outOfBounds.indexOf(currentEdge); var oppositeEdge = OppositeEdgeDictionary[currentEdge]; if (index > -1) { directions.splice(directions.indexOf(currentEdge), 1); currentEdge = directions.indexOf(oppositeEdge) > -1 ? oppositeEdge : directions.slice(-1)[0]; positionedCallout.calloutEdge = OppositeEdgeDictionary[currentEdge]; positionedCallout.targetEdge = currentEdge; positionedCallout.calloutRectangle = _moveRectangleToAnchorRectangle(positionedCallout.calloutRectangle, positionedCallout.calloutEdge, positionedCallout.alignPercent, targetRect, positionedCallout.targetEdge, targetPercent, gap); } else { return positionedCallout; } } return callout; } positioningFunctions._flipRectangleToFit = _flipRectangleToFit; })(positioningFunctions = exports.positioningFunctions || (exports.positioningFunctions = {})); var _a, _b, _c, _d; }); //# sourceMappingURL=positioning.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| colorValues.js | 33.33% | (1 / 3) | 100% | (0 / 0) | 0% | (0 / 1) | 33.33% | (1 / 3) | |
| colors.js | 15.33% | (23 / 150) | 0% | (0 / 59) | 0% | (0 / 23) | 15.33% | (23 / 150) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.COLOR_VALUES = { aliceblue: [240, 248, 255], antiquewhite: [250, 235, 215], aqua: [0, 255, 255], aquamarine: [127, 255, 212], azure: [240, 255, 255], beige: [245, 245, 220], bisque: [255, 228, 196], black: [0, 0, 0], blanchedalmond: [255, 235, 205], blue: [0, 0, 255], blueviolet: [138, 43, 226], brown: [165, 42, 42], burlywood: [222, 184, 135], cadetblue: [95, 158, 160], chartreuse: [127, 255, 0], chocolate: [210, 105, 30], coral: [255, 127, 80], cornflowerblue: [100, 149, 237], cornsilk: [255, 248, 220], crimson: [220, 20, 60], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgoldenrod: [184, 132, 11], darkgray: [169, 169, 169], darkgreen: [0, 100, 0], darkgrey: [169, 169, 169], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkseagreen: [143, 188, 143], darkslateblue: [72, 61, 139], darkslategray: [47, 79, 79], darkslategrey: [47, 79, 79], darkturquoise: [0, 206, 209], darkviolet: [148, 0, 211], deeppink: [255, 20, 147], deepskyblue: [0, 191, 255], dimgray: [105, 105, 105], dimgrey: [105, 105, 105], dodgerblue: [30, 144, 255], firebrick: [178, 34, 34], floralwhite: [255, 255, 240], forestgreen: [34, 139, 34], fuchsia: [255, 0, 255], gainsboro: [220, 220, 220], ghostwhite: [248, 248, 255], gold: [255, 215, 0], goldenrod: [218, 165, 32], gray: [128, 128, 128], green: [0, 128, 0], greenyellow: [173, 255, 47], grey: [128, 128, 128], honeydew: [240, 255, 240], hotpink: [255, 105, 180], indianred: [205, 92, 92], indigo: [75, 0, 130], ivory: [255, 255, 240], khaki: [240, 230, 140], lavender: [230, 230, 250], lavenderblush: [255, 240, 245], lawngreen: [124, 252, 0], lemonchiffon: [255, 250, 205], lightblue: [173, 216, 230], lightcoral: [240, 128, 128], lightcyan: [224, 255, 255], lightgoldenrodyellow: [250, 250, 210], lightgray: [211, 211, 211], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightsalmon: [255, 160, 122], lightseagreen: [32, 178, 170], lightskyblue: [135, 206, 250], lightslategray: [119, 136, 153], lightslategrey: [119, 136, 153], lightsteelblue: [176, 196, 222], lightyellow: [255, 255, 224], lime: [0, 255, 0], limegreen: [50, 205, 50], linen: [250, 240, 230], magenta: [255, 0, 255], maroon: [128, 0, 0], mediumaquamarine: [102, 205, 170], mediumblue: [0, 0, 205], mediumorchid: [186, 85, 211], mediumpurple: [147, 112, 219], mediumseagreen: [60, 179, 113], mediumslateblue: [123, 104, 238], mediumspringgreen: [0, 250, 154], mediumturquoise: [72, 209, 204], mediumvioletred: [199, 21, 133], midnightblue: [25, 25, 112], mintcream: [245, 255, 250], mistyrose: [255, 228, 225], moccasin: [255, 228, 181], navajowhite: [255, 222, 173], navy: [0, 0, 128], oldlace: [253, 245, 230], olive: [128, 128, 0], olivedrab: [107, 142, 35], orange: [255, 165, 0], orangered: [255, 69, 0], orchid: [218, 112, 214], palegoldenrod: [238, 232, 170], palegreen: [152, 251, 152], paleturquoise: [175, 238, 238], palevioletred: [219, 112, 147], papayawhip: [255, 239, 213], peachpuff: [255, 218, 185], peru: [205, 133, 63], pink: [255, 192, 203], plum: [221, 160, 203], powderblue: [176, 224, 230], purple: [128, 0, 128], rebeccapurple: [102, 51, 153], red: [255, 0, 0], rosybrown: [188, 143, 143], royalblue: [65, 105, 225], saddlebrown: [139, 69, 19], salmon: [250, 128, 114], sandybrown: [244, 164, 96], seagreen: [46, 139, 87], seashell: [255, 245, 238], sienna: [160, 82, 45], silver: [192, 192, 192], skyblue: [135, 206, 235], slateblue: [106, 90, 205], slategray: [119, 128, 144], slategrey: [119, 128, 144], snow: [255, 255, 250], springgreen: [0, 255, 127], steelblue: [70, 130, 180], tan: [210, 180, 140], teal: [0, 128, 128], thistle: [216, 191, 216], tomato: [255, 99, 71], turquoise: [64, 224, 208], violet: [238, 130, 238], wheat: [245, 222, 179], white: [255, 255, 255], whitesmoke: [245, 245, 245], yellow: [255, 255, 0], yellowgreen: [154, 205, 5] }; }); //# sourceMappingURL=colorValues.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 | 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | define(["require", "exports", "../../Utilities", "./colorValues"], function (require, exports, Utilities_1, colorValues_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.MAX_COLOR_SATURATION = 100; exports.MAX_COLOR_HUE = 359; exports.MAX_COLOR_VALUE = 100; exports.MAX_COLOR_RGBA = 255; function cssColor(color) { return _named(color) || _hex3(color) || _hex6(color) || _rgb(color) || _rgba(color) || _hsl(color) || _hsla(color); } exports.cssColor = cssColor; function rgb2hex(r, g, b) { return [ _numberToPaddedHex(r), _numberToPaddedHex(g), _numberToPaddedHex(b) ].join(''); } exports.rgb2hex = rgb2hex; function hsv2hex(h, s, v) { var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b; return rgb2hex(r, g, b); } exports.hsv2hex = hsv2hex; function rgb2hsv(r, g, b) { var h; var s; var v; var max = Math.max(r, g, b); var min = Math.min(r, g, b); var delta = max - min; // hue if (delta === 0) { h = 0; } else if (r === max) { h = ((g - b) / delta) % 6; } else if (g === max) { h = (b - r) / delta + 2; } else if (b === max) { h = (r - g) / delta + 4; } h = Math.round(h * 60); if (h < 0) { h += 360; } // saturation s = Math.round((max === 0 ? 0 : (delta / max)) * 100); // value v = Math.round(max / 255 * 100); return { h: h, s: s, v: v }; } exports.rgb2hsv = rgb2hsv; function hsl2hsv(h, s, l) { s *= ((l < 50) ? l : (100 - l)) / 100; return { h: h, s: 2 * s / (l + s) * 100, v: l + s }; } exports.hsl2hsv = hsl2hsv; function hsv2hsl(h, s, v) { s /= exports.MAX_COLOR_SATURATION; v /= exports.MAX_COLOR_VALUE; var l = (2 - s) * v; var sl = s * v; sl /= (l <= 1) ? l : 2 - l; sl = sl || 0; l /= 2; return { h: h, s: sl * 100, l: l * 100 }; } exports.hsv2hsl = hsv2hsl; function hsl2rgb(h, s, l) { var hsv = hsl2hsv(h, s, l); return hsv2rgb(hsv.h, hsv.s, hsv.v); } exports.hsl2rgb = hsl2rgb; function hsv2rgb(h, s, v) { s = s / 100; v = v / 100; var rgb = []; var c = v * s; var hh = h / 60; var x = c * (1 - Math.abs(hh % 2 - 1)); var m = v - c; switch (Math.floor(hh)) { case 0: rgb = [c, x, 0]; break; case 1: rgb = [x, c, 0]; break; case 2: rgb = [0, c, x]; break; case 3: rgb = [0, x, c]; break; case 4: rgb = [x, 0, c]; break; case 5: rgb = [c, 0, x]; break; } return { r: Math.round(exports.MAX_COLOR_RGBA * (rgb[0] + m)), g: Math.round(exports.MAX_COLOR_RGBA * (rgb[1] + m)), b: Math.round(exports.MAX_COLOR_RGBA * (rgb[2] + m)) }; } exports.hsv2rgb = hsv2rgb; function getColorFromString(color) { var _a = cssColor(color), a = _a.a, b = _a.b, g = _a.g, r = _a.r; var _b = rgb2hsv(r, g, b), h = _b.h, s = _b.s, v = _b.v; return { a: a, b: b, g: g, h: h, hex: rgb2hex(r, g, b), r: r, s: s, str: color, v: v }; } exports.getColorFromString = getColorFromString; function getColorFromRGBA(rgba) { var a = rgba.a, b = rgba.b, g = rgba.g, r = rgba.r; var _a = rgb2hsv(r, g, b), h = _a.h, s = _a.s, v = _a.v; var hex = rgb2hex(r, g, b); return { a: a, b: b, g: g, h: h, hex: hex, r: r, s: s, str: (a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + a / 100 + ")", v: v }; } exports.getColorFromRGBA = getColorFromRGBA; function getFullColorString(color) { return "#" + hsv2hex(color.h, exports.MAX_COLOR_SATURATION, exports.MAX_COLOR_VALUE); } exports.getFullColorString = getFullColorString; function updateSV(color, s, v) { var _a = hsv2rgb(color.h, s, v), r = _a.r, g = _a.g, b = _a.b; var hex = rgb2hex(r, g, b); return { a: color.a, b: b, g: g, h: color.h, hex: hex, r: r, s: s, str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")", v: v }; } exports.updateSV = updateSV; function updateH(color, h) { var _a = hsv2rgb(h, color.s, color.v), r = _a.r, g = _a.g, b = _a.b; var hex = rgb2hex(r, g, b); return { a: color.a, b: b, g: g, h: h, hex: hex, r: r, s: color.s, str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")", v: color.v }; } exports.updateH = updateH; function updateA(color, a) { return Utilities_1.assign({}, color, { a: a, str: (a === 100) ? "#" + color.hex : "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a / 100 + ")" }); } exports.updateA = updateA; function _numberToPaddedHex(num) { var hex = num.toString(16); return hex.length === 1 ? '0' + hex : hex; } function _named(str) { var c = colorValues_1.COLOR_VALUES[str.toLowerCase()]; if (c) { return { r: c[0], g: c[1], b: c[2], a: 100 }; } } function _rgb(str) { if (0 === str.indexOf('rgb(')) { str = str.match(/rgb\(([^)]+)\)/)[1]; var parts = str.split(/ *, */).map(Number); return { r: parts[0], g: parts[1], b: parts[2], a: 100 }; } } function _rgba(str) { if (str.indexOf('rgba(') === 0) { str = str.match(/rgba\(([^)]+)\)/)[1]; var parts = str.split(/ *, */).map(Number); return { r: parts[0], g: parts[1], b: parts[2], a: parts[3] * 100 }; } } function _hex6(str) { if ('#' === str[0] && 7 === str.length) { return { r: parseInt(str.slice(1, 3), 16), g: parseInt(str.slice(3, 5), 16), b: parseInt(str.slice(5, 7), 16), a: 100 }; } } function _hex3(str) { if ('#' === str[0] && 4 === str.length) { return { r: parseInt(str[1] + str[1], 16), g: parseInt(str[2] + str[2], 16), b: parseInt(str[3] + str[3], 16), a: 100 }; } } function _hsl(str) { if (str.indexOf('hsl(') === 0) { str = str.match(/hsl\(([^)]+)\)/)[1]; var parts = str.split(/ *, */); var h = parseInt(parts[0], 10); var s = parseInt(parts[1], 10); var l = parseInt(parts[2], 10); var rgba = hsl2rgb(h, s, l); rgba.a = 100; return rgba; } } function _hsla(str) { if (str.indexOf('hsla(') === 0) { str = str.match(/hsla\(([^)]+)\)/)[1]; var parts = str.split(/ *, */); var h = parseInt(parts[0], 10); var s = parseInt(parts[1], 10); var l = parseInt(parts[2], 10); var a = parseInt(parts[3], 10) * 100; var rgba = hsl2rgb(h, s, l); rgba.a = a; return rgba; } } }); //# sourceMappingURL=colors.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./colors"], function (require, exports, colors_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(colors_1); }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DateMath.js | 16.88% | (13 / 77) | 0% | (0 / 22) | 0% | (0 / 13) | 16.88% | (13 / 77) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | 2 1 1 1 1 1 1 1 1 1 1 1 1 | define(["require", "exports", "../dateValues/DateValues"], function (require, exports, DateValues_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DAYS_IN_WEEK = 7; var MONTHS_IN_YEAR = 12; /** * Returns a date offset from the given date by the specified number of days. * @param {Date} date - The origin date * @param {number} days - The number of days to offset. 'days' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of days */ function addDays(date, days) { var result = new Date(date.getTime()); result.setDate(result.getDate() + days); return result; } exports.addDays = addDays; /** * Returns a date offset from the given date by the specified number of weeks. * @param {Date} date - The origin date * @param {number} weeks - The number of weeks to offset. 'weeks' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of weeks */ function addWeeks(date, weeks) { return addDays(date, weeks * DAYS_IN_WEEK); } exports.addWeeks = addWeeks; /** * Returns a date offset from the given date by the specified number of months. * The method tries to preserve the day-of-month; however, if the new month does not have enough days * to contain the original day-of-month, we'll use the last day of the new month. * @param {Date} date - The origin date * @param {number} months - The number of months to offset. 'months' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of months */ function addMonths(date, months) { var result = new Date(date.getTime()); var newMonth = result.getMonth() + months; result.setMonth(newMonth); // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days. // Loop until we back up to a day the new month has. // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo) if (result.getMonth() !== ((newMonth % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) { result = addDays(result, -result.getDate()); } return result; } exports.addMonths = addMonths; /** * Returns a date offset from the given date by the specified number of years. * The method tries to preserve the day-of-month; however, if the new month does not have enough days * to contain the original day-of-month, we'll use the last day of the new month. * @param {Date} date - The origin date * @param {number} years - The number of years to offset. 'years' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of years */ function addYears(date, years) { var result = new Date(date.getTime()); result.setFullYear(date.getFullYear() + years); // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days. // Loop until we back up to a day the new month has. // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo) if (result.getMonth() !== ((date.getMonth() % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) { result = addDays(result, -result.getDate()); } return result; } exports.addYears = addYears; /** * Returns a date that is a copy of the given date, aside from the month changing to the given month. * The method tries to preserve the day-of-month; however, if the new month does not have enough days * to contain the original day-of-month, we'll use the last day of the new month. * @param {Date} date - The origin date * @param {number} month - The 0-based index of the month to set on the date. * @return {Date} A new Date object with the given month set. */ function setMonth(date, month) { return addMonths(date, month - date.getMonth()); } exports.setMonth = setMonth; /** * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal. * @return {boolean} True if the two dates represent the same date (regardless of time-of-day), false otherwise. */ function compareDates(date1, date2) { if (date1 == null && date2 == null) { return true; } else if (date1 == null || date2 == null) { return false; } else { return (date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate()); } } exports.compareDates = compareDates; /** * Compare the date parts of two dates * @param {Date} date1 - The first date to compare * @param {Date} date2 - The second date to compare * @returns {Number} A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value * if date1 is later than date2. */ function compareDatePart(date1, date2) { return getDatePartHashValue(date1) - getDatePartHashValue(date2); } exports.compareDatePart = compareDatePart; /** * Gets the date range array including the specified date. The date range array is calculated as the list * of dates accounting for the specified first day of the week and date range type. * @param {Date} date - The input date * @param {DateRangeType} dateRangeType - The desired date range type, i.e., day, week, month, etc. * @param {DayOfWeek} dayOfWeek - The first day of the week. * @returns {Date[]} An array of dates representing the date range containing the specified date. */ function getDateRangeArray(date, dateRangeType, firstDayOfWeek) { var datesArray = new Array(); var startDate = null; var endDate = null; switch (dateRangeType) { case DateValues_1.DateRangeType.Day: startDate = getDatePart(date); endDate = addDays(startDate, 1); break; case DateValues_1.DateRangeType.Week: startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek); endDate = addDays(startDate, DAYS_IN_WEEK); break; case DateValues_1.DateRangeType.Month: startDate = new Date(date.getFullYear(), date.getMonth(), 1); endDate = addMonths(startDate, 1); break; } // Populate the dates array with the dates in range datesArray.push(startDate); var nextDate = addDays(startDate, 1); while (!compareDates(nextDate, endDate)) { datesArray.push(nextDate); nextDate = addDays(nextDate, 1); } return datesArray; } exports.getDateRangeArray = getDateRangeArray; /** * Checks whether the specified date is in the given date range. * @param {Date} date - The origin date * @param {Date[]} dateRange - An array of dates to do the lookup on * @returns {bool} True if the date matches one of the dates in the specified array, false otherwise. */ function isInDateRangeArray(date, dateRange) { for (var _i = 0, dateRange_1 = dateRange; _i < dateRange_1.length; _i++) { var dateInRange = dateRange_1[_i]; if (compareDates(date, dateInRange)) { return true; } } return false; } exports.isInDateRangeArray = isInDateRangeArray; /** * Gets a new date with the time portion zeroed out, i.e., set to midnight * @param {Date} date - The origin date * @returns {Date} A new date with the time set to midnight */ function getDatePart(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); } /** * Gets the date for the first day of the week based on the given date assuming * the specified first day of the week. * @param {Date} date - The date to find the beginning of the week date for. * @return {Date} A new date object representing the first day of the week containing the input date. */ function getStartDateOfWeek(date, firstDayOfWeek) { var daysOffset = firstDayOfWeek - date.getDay(); if (daysOffset > 0) { // If first day of week is > date, go 1 week back, to ensure resulting date is in the past. daysOffset -= DAYS_IN_WEEK; } return addDays(date, daysOffset); } /** * Helper function to assist in date comparisons */ function getDatePartHashValue(date) { // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year. /* tslint:disable:no-bitwise */ return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9); /* tslint:enable:no-bitwise */ } }); //# sourceMappingURL=DateMath.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DateValues.js | 6.25% | (1 / 16) | 0% | (0 / 4) | 0% | (0 / 3) | 6.25% | (1 / 16) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * The days of the week */ var DayOfWeek; (function (DayOfWeek) { DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday"; DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday"; DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday"; DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday"; DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday"; DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday"; DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday"; })(DayOfWeek = exports.DayOfWeek || (exports.DayOfWeek = {})); /** * The supported date range types */ var DateRangeType; (function (DateRangeType) { DateRangeType[DateRangeType["Day"] = 0] = "Day"; DateRangeType[DateRangeType["Week"] = 1] = "Week"; DateRangeType[DateRangeType["Month"] = 2] = "Month"; })(DateRangeType = exports.DateRangeType || (exports.DateRangeType = {})); }); //# sourceMappingURL=DateValues.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BaseDecorator.js | 21.43% | (6 / 28) | 23.53% | (4 / 17) | 11.11% | (1 / 9) | 24% | (6 / 25) | |
| withContainsFocus.js | 17.02% | (8 / 47) | 33.33% | (7 / 21) | 6.25% | (1 / 16) | 18.6% | (8 / 43) | |
| withResponsiveMode.js | 14.06% | (9 / 64) | 25.93% | (7 / 27) | 5.88% | (1 / 17) | 15% | (9 / 60) | |
| withViewport.js | 13.11% | (8 / 61) | 21.21% | (7 / 33) | 5.88% | (1 / 17) | 14.04% | (8 / 57) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "../../Utilities"], function (require, exports, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BaseDecorator = (function (_super) {
__extends(BaseDecorator, _super);
function BaseDecorator() {
var _this = _super.call(this) || this;
_this._shouldUpdateComponentRef = false;
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
return _this;
}
/**
* Updates the ref to the component composed by the decorator, which will also take care of hoisting
* (and unhoisting as appropriate) methods from said component.
*
* Pass this method as the argument to the 'ref' property of the composed component.
*/
BaseDecorator.prototype._updateComposedComponentRef = function (composedComponentInstance) {
this._composedComponentInstance = composedComponentInstance;
if (composedComponentInstance) {
this._hoisted = Utilities_1.hoistMethods(this, composedComponentInstance);
}
else if (this._hoisted) {
Utilities_1.unhoistMethods(this, this._hoisted);
}
};
return BaseDecorator;
}(Utilities_1.BaseComponent));
exports.BaseDecorator = BaseDecorator;
});
//# sourceMappingURL=BaseDecorator.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 2 2 2 1 2 2 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "./BaseDecorator"], function (require, exports, React, BaseDecorator_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function withContainsFocus(ComposedComponent) {
return (function (_super) {
__extends(WithContainsFocusComponent, _super);
function WithContainsFocusComponent() {
var _this = _super.call(this) || this;
_this.state = {
containsFocus: false
};
_this._delayedSetContainsFocus = _this._async.debounce(_this._setContainsFocus, 20);
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
return _this;
}
WithContainsFocusComponent.prototype.componentWillUnmount = function () {
this._async.dispose();
};
WithContainsFocusComponent.prototype.render = function () {
var containsFocus = this.state.containsFocus;
return (React.createElement("div", { ref: 'root', onFocus: this._handleFocus.bind(this), onBlur: this._handleBlur.bind(this) },
React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, containsFocus: containsFocus }, this.props))));
};
WithContainsFocusComponent.prototype.forceUpdate = function () {
this._composedComponentInstance.forceUpdate();
};
WithContainsFocusComponent.prototype._handleFocus = function (ev) {
this._newContainsFocus = true;
this._delayedSetContainsFocus();
};
WithContainsFocusComponent.prototype._handleBlur = function (ev) {
this._newContainsFocus = false;
this._delayedSetContainsFocus();
};
WithContainsFocusComponent.prototype._setContainsFocus = function () {
if (this.state.containsFocus !== this._newContainsFocus) {
this.setState({ containsFocus: this._newContainsFocus });
}
};
return WithContainsFocusComponent;
}(BaseDecorator_1.BaseDecorator));
}
exports.withContainsFocus = withContainsFocus;
});
//# sourceMappingURL=withContainsFocus.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 2 2 2 1 2 2 1 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "./BaseDecorator", "../../Utilities"], function (require, exports, React, BaseDecorator_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ResponsiveMode;
(function (ResponsiveMode) {
ResponsiveMode[ResponsiveMode["small"] = 0] = "small";
ResponsiveMode[ResponsiveMode["medium"] = 1] = "medium";
ResponsiveMode[ResponsiveMode["large"] = 2] = "large";
ResponsiveMode[ResponsiveMode["xLarge"] = 3] = "xLarge";
ResponsiveMode[ResponsiveMode["xxLarge"] = 4] = "xxLarge";
ResponsiveMode[ResponsiveMode["xxxLarge"] = 5] = "xxxLarge";
})(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {}));
var RESPONSIVE_MAX_CONSTRAINT = [
479,
639,
1023,
1365,
1919,
99999999
];
var _defaultMode;
/**
* Allows a server rendered scenario to provide a default responsive mode.
*/
function setResponsiveMode(responsiveMode) {
_defaultMode = responsiveMode;
}
exports.setResponsiveMode = setResponsiveMode;
function withResponsiveMode(ComposedComponent) {
return (function (_super) {
__extends(WithResponsiveMode, _super);
function WithResponsiveMode() {
var _this = _super.call(this) || this;
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
_this.state = {
responsiveMode: _this._getResponsiveMode()
};
return _this;
}
WithResponsiveMode.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'resize', function () {
var responsiveMode = _this._getResponsiveMode();
if (responsiveMode !== _this.state.responsiveMode) {
_this.setState({
responsiveMode: responsiveMode
});
}
});
};
WithResponsiveMode.prototype.componentWillUnmount = function () {
this._events.dispose();
};
WithResponsiveMode.prototype.render = function () {
var responsiveMode = this.state.responsiveMode;
return (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props)));
};
WithResponsiveMode.prototype._getResponsiveMode = function () {
var responsiveMode = ResponsiveMode.small;
var win = Utilities_1.getWindow();
if (typeof win !== 'undefined') {
while (win.innerWidth > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {
responsiveMode++;
}
}
else {
if (_defaultMode !== undefined) {
responsiveMode = _defaultMode;
}
else {
throw new Error('Content was rendered in a server environment without providing a default responsive mode. ' +
'Call setResponsiveMode to define what the responsive mode is.');
}
}
return responsiveMode;
};
return WithResponsiveMode;
}(BaseDecorator_1.BaseDecorator));
}
exports.withResponsiveMode = withResponsiveMode;
});
//# sourceMappingURL=withResponsiveMode.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 2 2 2 1 2 2 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "./BaseDecorator", "../../Utilities"], function (require, exports, React, BaseDecorator_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RESIZE_DELAY = 500;
var MAX_RESIZE_ATTEMPTS = 3;
function withViewport(ComposedComponent) {
return (function (_super) {
__extends(WithViewportComponent, _super);
function WithViewportComponent() {
var _this = _super.call(this) || this;
/* Note: using lambda here because decorators don't seem to work in decorators. */
_this._updateViewport = function (withForceUpdate) {
var viewport = _this.state.viewport;
var viewportElement = _this.refs.root;
var scrollElement = Utilities_1.findScrollableParent(viewportElement);
var scrollRect = Utilities_1.getRect(scrollElement);
var clientRect = Utilities_1.getRect(viewportElement);
var updateComponent = function () {
if (withForceUpdate && _this._composedComponentInstance) {
_this._composedComponentInstance.forceUpdate();
}
};
var isSizeChanged = (clientRect.width !== viewport.width ||
scrollRect.height !== viewport.height);
if (isSizeChanged && _this._resizeAttempts < MAX_RESIZE_ATTEMPTS) {
_this._resizeAttempts++;
_this.setState({
viewport: {
width: clientRect.width,
height: scrollRect.height
}
}, _this._updateViewport);
}
else {
_this._resizeAttempts = 0;
updateComponent();
}
};
_this._resizeAttempts = 0;
_this.state = {
viewport: {
width: 0,
height: 0
}
};
return _this;
}
WithViewportComponent.prototype.componentDidMount = function () {
this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
leading: false
});
this._events.on(window, 'resize', this._onAsyncResize);
this._updateViewport();
};
WithViewportComponent.prototype.componentWillUnmount = function () {
this._events.dispose();
};
WithViewportComponent.prototype.render = function () {
var viewport = this.state.viewport;
var isViewportVisible = viewport.width > 0 && viewport.height > 0;
return (React.createElement("div", { className: 'ms-Viewport', ref: 'root', style: { minWidth: 1, minHeight: 1 } }, isViewportVisible && (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, viewport: viewport }, this.props)))));
};
WithViewportComponent.prototype.forceUpdate = function () {
this._updateViewport(true);
};
WithViewportComponent.prototype._onAsyncResize = function () {
this._updateViewport();
};
return WithViewportComponent;
}(BaseDecorator_1.BaseDecorator));
}
exports.withViewport = withViewport;
});
//# sourceMappingURL=withViewport.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DragDropHelper.js | 1.12% | (2 / 178) | 0% | (0 / 102) | 0% | (0 / 22) | 1.12% | (2 / 178) | |
| index.js | 28.57% | (2 / 7) | 0% | (0 / 2) | 0% | (0 / 2) | 40% | (2 / 5) | |
| interfaces.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 | 2 1 | define(["require", "exports", "react-dom", "../../Utilities"], function (require, exports, ReactDOM, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DISTANCE_FOR_DRAG_SQUARED = 25; // the minimum mouse move distance to treat it as drag event var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button var DragDropHelper = (function () { function DragDropHelper(params) { this._selection = params.selection; this._dragEnterCounts = {}; this._activeTargets = {}; this._lastId = 0; this._distanceSquaredForDrag = typeof params.minimumPixelsForDrag === 'number' ? params.minimumPixelsForDrag * params.minimumPixelsForDrag : DISTANCE_FOR_DRAG_SQUARED; this._events = new Utilities_1.EventGroup(this); // clear drag data when mouse up, use capture event to ensure it will be run this._events.on(document.body, 'mouseup', this._onMouseUp.bind(this), true); this._events.on(document, 'mouseup', this._onDocumentMouseUp.bind(this), true); } DragDropHelper.prototype.dispose = function () { this._events.dispose(); }; DragDropHelper.prototype.subscribe = function (root, events, dragDropOptions) { var _this = this; var _a = dragDropOptions.key, key = _a === void 0 ? "" + ++this._lastId : _a; var handlers = []; var onDragLeave; var onDragEnter; var onDragEnd; var onDrop; var onDragOver; var onMouseDown; var isDraggable; var isDroppable; var activeTarget; if (dragDropOptions && root) { var eventMap = dragDropOptions.eventMap, context_1 = dragDropOptions.context, updateDropState_1 = dragDropOptions.updateDropState; var dragDropTarget = { root: root, options: dragDropOptions, key: key }; isDraggable = this._isDraggable(dragDropTarget); isDroppable = this._isDroppable(dragDropTarget); if (isDraggable || isDroppable) { if (eventMap) { for (var _i = 0, eventMap_1 = eventMap; _i < eventMap_1.length; _i++) { var event_1 = eventMap_1[_i]; var handler = { callback: event_1.callback.bind(null, context_1), eventName: event_1.eventName }; handlers.push(handler); this._events.on(root, handler.eventName, handler.callback); } } } if (isDroppable) { // If the target is droppable, wire up global event listeners to track drop-related events. onDragLeave = function (event) { if (!event.isHandled) { event.isHandled = true; _this._dragEnterCounts[key]--; if (_this._dragEnterCounts[key] === 0) { updateDropState_1(false /* isDropping */, event); } } }; onDragEnter = function (event) { event.preventDefault(); // needed for IE if (!event.isHandled) { event.isHandled = true; _this._dragEnterCounts[key]++; if (_this._dragEnterCounts[key] === 1) { updateDropState_1(true /* isDropping */, event); } } }; onDragEnd = function (event) { _this._dragEnterCounts[key] = 0; updateDropState_1(false /* isDropping */, event); }; onDrop = function (event) { _this._dragEnterCounts[key] = 0; updateDropState_1(false /* isDropping */, event); if (dragDropOptions.onDrop) { dragDropOptions.onDrop(dragDropOptions.context.data, event); } }; onDragOver = function (event) { event.preventDefault(); }; this._dragEnterCounts[key] = 0; // dragenter and dragleave will be fired when hover to the child element // but we only want to change state when enter or leave the current element // use the count to ensure it. events.on(root, 'dragenter', onDragEnter); events.on(root, 'dragleave', onDragLeave); events.on(root, 'dragend', onDragEnd); events.on(root, 'drop', onDrop); events.on(root, 'dragover', onDragOver); } if (isDraggable) { // If the target is draggable, wire up local event listeners for mouse events. onMouseDown = this._onMouseDown.bind(this, dragDropTarget); onDragEnd = this._onDragEnd.bind(this, dragDropTarget); events.on(root, 'mousedown', onMouseDown); events.on(root, 'dragend', onDragEnd); } activeTarget = { target: dragDropTarget, dispose: function () { if (_this._activeTargets[key] === activeTarget) { delete _this._activeTargets[key]; } if (root) { for (var _i = 0, handlers_1 = handlers; _i < handlers_1.length; _i++) { var handler = handlers_1[_i]; _this._events.off(root, handler.eventName, handler.callback); } if (isDroppable) { events.off(root, 'dragenter', onDragEnter); events.off(root, 'dragleave', onDragLeave); events.off(root, 'dragend', onDragEnd); events.off(root, 'dragover', onDragOver); events.off(root, 'drop', onDrop); } if (isDraggable) { events.off(root, 'mousedown', onMouseDown); events.off(root, 'dragend', onDragEnd); } } } }; this._activeTargets[key] = activeTarget; } return { key: key, dispose: function () { if (activeTarget) { activeTarget.dispose(); } } }; }; DragDropHelper.prototype.unsubscribe = function (root, key) { var activeTarget = this._activeTargets[key]; if (activeTarget) { activeTarget.dispose(); } }; DragDropHelper.prototype._onDragEnd = function (target, event) { var options = target.options; if (options.onDragEnd) { options.onDragEnd(options.context.data, event); } }; /** * clear drag data when mouse up on body */ DragDropHelper.prototype._onMouseUp = function (event) { this._isDragging = false; if (this._dragData) { for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) { var key = _a[_i]; var activeTarget = this._activeTargets[key]; if (activeTarget.target.root) { this._events.off(activeTarget.target.root, 'mousemove'); this._events.off(activeTarget.target.root, 'mouseleave'); } } if (this._dragData.dropTarget) { // raise dragleave event to let dropTarget know it need to remove dropping style Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave'); Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'drop'); } } this._dragData = null; }; /** * clear drag data when mouse up outside of the document */ DragDropHelper.prototype._onDocumentMouseUp = function (event) { if (event.target === document.documentElement) { this._onMouseUp(event); } }; /** * when mouse move over a new drop target while dragging some items, * fire dragleave on the old target and fire dragenter to the new target * The target will handle style change on dragenter and dragleave events. */ DragDropHelper.prototype._onMouseMove = function (target, event) { var // use buttons property here since ev.button in some edge case is not updating well during the move. // but firefox doesn't support it, so we set the default value when it is not defined. _a = event.buttons, // use buttons property here since ev.button in some edge case is not updating well during the move. // but firefox doesn't support it, so we set the default value when it is not defined. buttons = _a === void 0 ? MOUSEMOVE_PRIMARY_BUTTON : _a; if (this._dragData && buttons !== MOUSEMOVE_PRIMARY_BUTTON) { // cancel mouse down event and return early when the primary button is not pressed this._onMouseUp(event); return; } var root = target.root, options = target.options, key = target.key; if (this._isDragging) { if (this._isDroppable(target)) { // we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into // the inner target (folder), we first set dropTarget to the inner element. But the same event is bubbled to the // outer target too, and we need to prevent the outer one from taking over. // So, check if the last dropTarget is not a child of the current. if (this._dragData.dropTarget && this._dragData.dropTarget.key !== key && !this._isChild(root, this._dragData.dropTarget.root)) { Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave'); this._dragData.dropTarget = null; } if (!this._dragData.dropTarget) { Utilities_1.EventGroup.raise(root, 'dragenter'); this._dragData.dropTarget = target; } } } else if (this._dragData) { if (this._isDraggable(target)) { var xDiff = this._dragData.clientX - event.clientX; var yDiff = this._dragData.clientY - event.clientY; if (xDiff * xDiff + yDiff * yDiff >= this._distanceSquaredForDrag) { if (this._dragData.dragTarget) { this._isDragging = true; if (options.onDragStart) { options.onDragStart(options.context.data, options.context.index, this._selection.getSelection(), event); } } } } } }; /** * when mouse leave a target while dragging some items, fire dragleave to the target */ DragDropHelper.prototype._onMouseLeave = function (target, event) { if (this._isDragging) { if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) { Utilities_1.EventGroup.raise(target.root, 'dragleave'); this._dragData.dropTarget = null; } } }; /** * when mouse down on a draggable item, we start to track dragdata. */ DragDropHelper.prototype._onMouseDown = function (target, event) { if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) { // Ignore anything except the primary button. return; } if (this._isDraggable(target)) { this._dragData = { clientX: event.clientX, clientY: event.clientY, eventTarget: event.target, dragTarget: target }; for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) { var key = _a[_i]; var activeTarget = this._activeTargets[key]; if (activeTarget.target.root) { this._events.on(activeTarget.target.root, 'mousemove', this._onMouseMove.bind(this, activeTarget.target)); this._events.on(activeTarget.target.root, 'mouseleave', this._onMouseLeave.bind(this, activeTarget.target)); } } } else { this._dragData = null; } }; /** * determine whether the child target is a descendant of the parent */ DragDropHelper.prototype._isChild = function (parent, child) { var parentElement = ReactDOM.findDOMNode(parent); var childElement = ReactDOM.findDOMNode(child); while (childElement && childElement.parentElement) { if (childElement.parentElement === parentElement) { return true; } childElement = childElement.parentElement; } return false; }; DragDropHelper.prototype._isDraggable = function (target) { var options = target.options; return options.canDrag && options.canDrag(options.context.data); }; DragDropHelper.prototype._isDroppable = function (target) { // TODO: take the drag item into consideration to prevent dragging an item into the same group var options = target.options; var dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : null; return options.canDrop && options.canDrop(options.context, dragContext); }; return DragDropHelper; }()); exports.DragDropHelper = DragDropHelper; }); //# sourceMappingURL=DragDropHelper.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 1 | define(["require", "exports", "./DragDropHelper"], function (require, exports, DragDropHelper_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(DragDropHelper_1); }); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=interfaces.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react"], function (require, exports, React) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Route = (function (_super) {
__extends(Route, _super);
function Route() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Route;
}(React.Component));
exports.Route = Route;
});
//# sourceMappingURL=Route.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 2 2 2 1 2 1 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "../../Utilities"], function (require, exports, React, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Router = (function (_super) {
__extends(Router, _super);
function Router() {
return _super !== null && _super.apply(this, arguments) || this;
}
Router.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'hashchange', function () { return _this.forceUpdate(); });
};
Router.prototype.render = function () {
return (React.createElement("div", null, this._resolveRoute()));
};
Router.prototype._getPath = function () {
var path = location.hash;
var index = path.lastIndexOf('#');
if (index > 0) {
path = path.substr(0, index);
}
return path;
};
Router.prototype._resolveRoute = function (path, children) {
var _this = this;
path = path || this._getPath();
children = children || this.props.children;
var routes = React.Children.toArray(children);
var _loop_1 = function (i) {
var route = routes[i];
if (_match(path, route)) {
var _a = route.props, component_1 = _a.component, getComponent_1 = _a.getComponent;
if (getComponent_1) {
var asynchronouslyResolved_1 = false;
if (getComponent_1.component) {
component_1 = getComponent_1.component;
}
else {
getComponent_1(function (resolved) {
component_1 = getComponent_1.component = resolved;
if (asynchronouslyResolved_1) {
_this.forceUpdate();
}
});
}
// Note: in webpack 2, this ends up always async.
asynchronouslyResolved_1 = true;
}
if (component_1) {
var componentChildren = this_1._resolveRoute(path, route.props.children || []);
if (componentChildren) {
return { value: React.createElement(component_1, { key: route.key }, componentChildren) };
}
else {
return { value: React.createElement(component_1, { key: route.key }) };
}
}
else if (getComponent_1) {
return { value: null };
}
}
};
var this_1 = this;
for (var i = 0; i < routes.length; i++) {
var state_1 = _loop_1(i);
if (typeof state_1 === "object")
return state_1.value;
}
return null;
};
return Router;
}(Utilities_1.BaseComponent));
exports.Router = Router;
function _match(currentPath, child) {
if (child.props) {
var path = child.props.path;
path = path || '';
currentPath = currentPath || '';
return ((!path) ||
(path.toLowerCase() === currentPath.toLowerCase()));
}
return false;
}
});
//# sourceMappingURL=Router.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 2 | define(["require", "exports", "./Route", "./Router"], function (require, exports, Route_1, Router_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Route = Route_1.Route; exports.Router = Router_1.Router; }); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Selection.js | 1.32% | (2 / 152) | 0% | (0 / 101) | 0% | (0 / 25) | 1.35% | (2 / 148) | |
| SelectionLayout.js | 13.33% | (2 / 15) | 0% | (0 / 8) | 0% | (0 / 7) | 13.33% | (2 / 15) | |
| SelectionPage.js | 27.27% | (6 / 22) | 28.57% | (4 / 14) | 11.11% | (1 / 9) | 31.58% | (6 / 19) | |
| SelectionZone.js | 2.97% | (8 / 269) | 5.56% | (10 / 180) | 2.94% | (1 / 34) | 3.05% | (8 / 262) | |
| index.js | 20% | (2 / 10) | 0% | (0 / 2) | 0% | (0 / 2) | 25% | (2 / 8) | |
| interfaces.js | 8.33% | (1 / 12) | 0% | (0 / 4) | 0% | (0 / 3) | 8.33% | (1 / 12) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 | 2 1 | define(["require", "exports", "./interfaces", "../../Utilities"], function (require, exports, interfaces_1, Utilities_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Selection = (function () { function Selection(options) { if (options === void 0) { options = {}; } var onSelectionChanged = options.onSelectionChanged, getKey = options.getKey, _a = options.canSelectItem, canSelectItem = _a === void 0 ? function (item) { return true; } : _a; this.getKey = getKey || (function (item, index) { return (item ? item.key : String(index)); }); this._changeEventSuppressionCount = 0; this._exemptedCount = 0; this._anchoredIndex = 0; this._unselectableCount = 0; this.setItems([], true); this._onSelectionChanged = onSelectionChanged; this.canSelectItem = canSelectItem; } Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) { this._changeEventSuppressionCount += isEnabled ? -1 : 1; if (this._changeEventSuppressionCount === 0 && this._hasChanged) { this._hasChanged = false; if (!suppressChange) { this._change(); } } }; /** * Selection needs the items, call this method to set them. If the set * of items is the same, this will re-evaluate selection and index maps. * Otherwise, shouldClear should be set to true, so that selection is * cleared. */ Selection.prototype.setItems = function (items, shouldClear) { if (shouldClear === void 0) { shouldClear = true; } var newKeyToIndexMap = {}; var newUnselectableIndices = {}; var hasSelectionChanged = false; this.setChangeEvents(false); // Reset the unselectable count. this._unselectableCount = 0; // Build lookup table for quick selection evaluation. for (var i = 0; i < items.length; i++) { var item = items[i]; if (item) { newKeyToIndexMap[this.getKey(item, i)] = i; } newUnselectableIndices[i] = item && !this.canSelectItem(item); if (newUnselectableIndices[i]) { this._unselectableCount++; } } if (shouldClear) { this.setAllSelected(false); } // Check the exemption list for discrepencies. var newExemptedIndicies = {}; for (var indexProperty in this._exemptedIndices) { if (this._exemptedIndices.hasOwnProperty(indexProperty)) { var index = Number(indexProperty); var item = this._items[index]; var exemptKey = item ? this.getKey(item, Number(index)) : undefined; var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index; if (newIndex === undefined) { // We don't know the index of the item any more so it's either moved or removed. // In this case we reset the entire selection. this.setAllSelected(false); break; } else { // We know the new index of the item. update the existing exemption table. newExemptedIndicies[newIndex] = true; hasSelectionChanged = hasSelectionChanged || (newIndex !== index); } } } this._exemptedIndices = newExemptedIndicies; this._keyToIndexMap = newKeyToIndexMap; this._unselectableIndices = newUnselectableIndices; this._items = items || []; if (hasSelectionChanged) { this._change(); } this.setChangeEvents(true); }; Selection.prototype.getItems = function () { return this._items; }; Selection.prototype.getSelection = function () { if (!this._selectedItems) { this._selectedItems = []; for (var i = 0; i < this._items.length; i++) { if (this.isIndexSelected(i)) { this._selectedItems.push(this._items[i]); } } } return this._selectedItems; }; Selection.prototype.getSelectedCount = function () { return this._isAllSelected ? (this._items.length - this._exemptedCount - this._unselectableCount) : (this._exemptedCount); }; Selection.prototype.isRangeSelected = function (fromIndex, count) { var endIndex = fromIndex + count; for (var i = fromIndex; i < endIndex; i++) { if (!this.isIndexSelected(i)) { return false; } } return true; }; Selection.prototype.isAllSelected = function () { var selectableCount = this._items.length - this._unselectableCount; return ((this.count > 0) && (this._isAllSelected && this._exemptedCount === 0) || (!this._isAllSelected && (this._exemptedCount === selectableCount) && selectableCount > 0)); }; Selection.prototype.isKeySelected = function (key) { var index = this._keyToIndexMap[key]; return this.isIndexSelected(index); }; Selection.prototype.isIndexSelected = function (index) { return !!((this.count > 0) && (this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) || (!this._isAllSelected && this._exemptedIndices[index])); }; Selection.prototype.setAllSelected = function (isAllSelected) { var selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0; if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) { this._exemptedIndices = {}; this._exemptedCount = 0; this._isAllSelected = isAllSelected; this._updateCount(); } }; Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) { var index = this._keyToIndexMap[key]; if (index >= 0) { this.setIndexSelected(index, isSelected, shouldAnchor); } }; Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) { // Clamp the index. index = Math.min(Math.max(0, index), this._items.length - 1); // No-op on out of bounds selections. if (index < 0 || index >= this._items.length) { return; } var isExempt = this._exemptedIndices[index]; var hasChanged = false; var canSelect = !this._unselectableIndices[index]; if (canSelect) { // Determine if we need to remove the exemption. if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) { hasChanged = true; delete this._exemptedIndices[index]; this._exemptedCount--; } // Determine if we need to add the exemption. if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) { hasChanged = true; this._exemptedIndices[index] = true; this._exemptedCount++; } if (shouldAnchor) { this._anchoredIndex = index; } } if (hasChanged) { this._updateCount(); } }; Selection.prototype.selectToKey = function (key, clearSelection) { this.selectToIndex(this._keyToIndexMap[key], clearSelection); }; Selection.prototype.selectToIndex = function (index, clearSelection) { var anchorIndex = this._anchoredIndex || 0; var startIndex = Math.min(index, anchorIndex); var endIndex = Math.max(index, anchorIndex); this.setChangeEvents(false); if (clearSelection) { this.setAllSelected(false); } for (; startIndex <= endIndex; startIndex++) { this.setIndexSelected(startIndex, true, false); } this.setChangeEvents(true); }; Selection.prototype.toggleAllSelected = function () { this.setAllSelected(!this.isAllSelected()); }; Selection.prototype.toggleKeySelected = function (key) { this.setKeySelected(key, !this.isKeySelected(key), true); }; Selection.prototype.toggleIndexSelected = function (index) { this.setIndexSelected(index, !this.isIndexSelected(index), true); }; Selection.prototype.toggleRangeSelected = function (fromIndex, count) { var isRangeSelected = this.isRangeSelected(fromIndex, count); var endIndex = fromIndex + count; this.setChangeEvents(false); for (var i = fromIndex; i < endIndex; i++) { this.setIndexSelected(i, !isRangeSelected, false); } this.setChangeEvents(true); }; Selection.prototype._updateCount = function () { this.count = this.getSelectedCount(); this._change(); }; Selection.prototype._change = function () { if (this._changeEventSuppressionCount === 0) { this._selectedItems = null; Utilities_1.EventGroup.raise(this, interfaces_1.SELECTION_CHANGE); if (this._onSelectionChanged) { this._onSelectionChanged(); } } else { this._hasChanged = true; } }; return Selection; }()); exports.Selection = Selection; }); //# sourceMappingURL=Selection.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 1 | define(["require", "exports", "./interfaces"], function (require, exports, interfaces_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var SelectionLayout = (function () { function SelectionLayout(direction) { this._direction = direction; } SelectionLayout.prototype.getItemIndexAbove = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.max(0, focusIndex - 1) : focusIndex; }; SelectionLayout.prototype.getItemIndexBelow = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.min(items.length - 1, focusIndex + 1) : focusIndex; }; SelectionLayout.prototype.getItemIndexLeft = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.max(0, focusIndex - 1); }; SelectionLayout.prototype.getItemIndexRight = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.min(items.length - 1, focusIndex + 1); }; return SelectionLayout; }()); exports.SelectionLayout = SelectionLayout; }); //# sourceMappingURL=SelectionLayout.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 2 2 2 1 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
define(["require", "exports", "react", "@uifabric/example-app-base", "./examples/Selection.Basic.Example"], function (require, exports, React, example_app_base_1, Selection_Basic_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx');
var SelectionPage = (function (_super) {
__extends(SelectionPage, _super);
function SelectionPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SelectionPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Selection', componentName: 'SelectionExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Basic Selection Example', code: SelectionBasicExampleCode },
React.createElement(Selection_Basic_Example_1.SelectionBasicExample, null)), overview: React.createElement("div", null,
React.createElement("p", null, "Selection is a store that maintains the selection state of items in an efficient way. It exposes methods for accessing the selection state given an item index. If the items change, it can resolve the selection if items move in the array."),
React.createElement("p", null, "SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is."),
React.createElement("p", null, "SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute."),
React.createElement("p", null, "Available attributes:"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, "data-selection-index"),
": the index of the item being represented.This would go on the root of the tile/row."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-invoke"),
": this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-toggle"),
": this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-toggle-all"),
": this boolean flag indicates that clicking it should toggle all selection."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-disabled"),
": allows a branch of the DOM to be marked to ignore input events that alter selections."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return SelectionPage;
}(React.Component));
exports.SelectionPage = SelectionPage;
});
//# sourceMappingURL=SelectionPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 | 2 2 2 1 2 2 2 1 | var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "./SelectionLayout", "./interfaces"], function (require, exports, React, Utilities_1, SelectionLayout_1, interfaces_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Selection definitions:
//
// Anchor index: the point from which a range selection starts.
// Focus index: the point from which layout movement originates from.
//
// These two can differ. Tests:
//
// If you start at index 5
// Shift click to index 10
// The focus is 10, the anchor is 5.
// If you shift click at index 0
// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.
// If you click index 8
// The anchor and focus are set to 8.
var SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';
var SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';
var SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';
var SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';
var SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';
var SelectionZone = (function (_super) {
__extends(SelectionZone, _super);
function SelectionZone() {
return _super !== null && _super.apply(this, arguments) || this;
}
SelectionZone.prototype.componentDidMount = function () {
var win = Utilities_1.getWindow(this.refs.root);
var scrollElement = Utilities_1.findScrollableParent(this.refs.root);
// Track the latest modifier keys globally.
this._events.on(win, 'keydown keyup', this._updateModifiers);
this._events.on(scrollElement, 'click', this._tryClearOnEmptyClick);
};
SelectionZone.prototype.render = function () {
return (React.createElement("div", __assign({ className: 'ms-SelectionZone', ref: 'root', onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onClick: this._onClick, onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu }, {
onMouseDownCapture: this._onMouseDownCapture,
onFocusCapture: this._onFocus
}), this.props.children));
};
/**
* In some cases, the consuming scenario requires to set focus on a row without having SelectionZone
* react to the event. Note that focus events in IE <= 11 will occur asynchronously after .focus() has
* been called on an element, so we need a flag to store the idea that we will bypass the "next"
* focus event that occurs. This method does that.
*/
SelectionZone.prototype.ignoreNextFocus = function () {
this._shouldHandleFocus = false;
};
SelectionZone.prototype._onMouseDownCapture = function (ev) {
if (document.activeElement !== ev.target && !Utilities_1.elementContains(document.activeElement, ev.target)) {
this.ignoreNextFocus();
}
};
/**
* When we focus an item, for single/multi select scenarios, we should try to select it immediately
* as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them
* specially.
*/
SelectionZone.prototype._onFocus = function (ev) {
var target = ev.target;
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
if (this._shouldHandleFocus && selectionMode !== interfaces_1.SelectionMode.none) {
var isToggle = this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);
var itemRoot = this._findItemRoot(target);
if (!isToggle && itemRoot) {
var index = this._getItemIndex(itemRoot);
if (isToggleModifierPressed) {
// set anchor only.
selection.setIndexSelected(index, selection.isIndexSelected(index), true);
}
else {
this._onItemSurfaceClick(ev, index);
}
}
}
this._shouldHandleFocus = false;
};
SelectionZone.prototype._onMouseDown = function (ev) {
this._updateModifiers(ev);
var target = ev.target;
var itemRoot = this._findItemRoot(target);
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
break;
}
else if (itemRoot) {
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
break;
}
else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
this._onInvokeMouseDown(ev, this._getItemIndex(itemRoot));
break;
}
else if (target === itemRoot) {
break;
}
}
target = Utilities_1.getParent(target);
}
};
SelectionZone.prototype._onClick = function (ev) {
this._updateModifiers(ev);
var target = ev.target;
var itemRoot = this._findItemRoot(target);
// No-op if selection is disabled
if (this._isSelectionDisabled(target)) {
return;
}
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
this._onToggleAllClick(ev);
break;
}
else if (itemRoot) {
var index = this._getItemIndex(itemRoot);
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
if (this._isShiftPressed) {
this._onItemSurfaceClick(ev, index);
}
else {
this._onToggleClick(ev, index);
}
break;
}
else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
this._onInvokeClick(ev, index);
break;
}
else if (target === itemRoot) {
this._onItemSurfaceClick(ev, index);
break;
}
}
target = Utilities_1.getParent(target);
}
};
SelectionZone.prototype._onContextMenu = function (ev) {
var target = ev.target;
var _a = this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;
if (onItemContextMenu) {
var itemRoot = this._findItemRoot(target);
if (itemRoot) {
var index = this._getItemIndex(itemRoot);
onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);
ev.preventDefault();
}
}
};
SelectionZone.prototype._isSelectionDisabled = function (target) {
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {
return true;
}
target = Utilities_1.getParent(target);
}
return false;
};
/**
* In multi selection, if you double click within an item's root (but not within the invoke element or input elements),
* we should execute the invoke handler.
*/
SelectionZone.prototype._onDoubleClick = function (ev) {
var target = ev.target;
if (this._isSelectionDisabled(target)) {
return;
}
var _a = this.props, selectionMode = _a.selectionMode, onItemInvoked = _a.onItemInvoked;
var itemRoot = this._findItemRoot(target);
if (itemRoot && onItemInvoked && selectionMode !== interfaces_1.SelectionMode.none && !this._isInputElement(target)) {
var index = this._getItemIndex(itemRoot);
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||
this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
break;
}
else if (target === itemRoot) {
this._onInvokeClick(ev, index);
break;
}
target = Utilities_1.getParent(target);
}
target = Utilities_1.getParent(target);
}
};
SelectionZone.prototype._onKeyDown = function (ev) {
this._updateModifiers(ev);
var target = ev.target;
if (this._isSelectionDisabled(target)) {
return;
}
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
var isSelectAllKey = ev.which === Utilities_1.KeyCodes.a && (this._isCtrlPressed || this._isMetaPressed);
var isClearSelectionKey = ev.which === Utilities_1.KeyCodes.escape;
// Ignore key downs from input elements.
if (this._isInputElement(target)) {
// A key was pressed while an item in this zone was focused.
this._shouldHandleFocus = true;
return;
}
// If ctrl-a is pressed, select all (if all are not already selected.)
if (isSelectAllKey && selectionMode === interfaces_1.SelectionMode.multiple && !selection.isAllSelected()) {
selection.setAllSelected(true);
ev.stopPropagation();
ev.preventDefault();
return;
}
// If escape is pressed, clear selection (if any are selected.)
if (isClearSelectionKey && selection.getSelectedCount() > 0) {
selection.setAllSelected(false);
ev.stopPropagation();
ev.preventDefault();
return;
}
var itemRoot = this._findItemRoot(target);
// If a key was pressed within an item, we should treat "enters" as invokes and "space" as toggle
if (itemRoot) {
var index = this._getItemIndex(itemRoot);
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
// For toggle elements, assuming they are rendered as buttons, they will generate a click event,
// so we can no-op for any keydowns in this case.
break;
}
else if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT') {
return false;
}
else if (target === itemRoot) {
if (ev.which === Utilities_1.KeyCodes.enter) {
this._onInvokeClick(ev, index);
ev.preventDefault();
return;
}
else if (ev.which === Utilities_1.KeyCodes.space) {
this._onToggleClick(ev, index);
ev.preventDefault();
return;
}
break;
}
target = Utilities_1.getParent(target);
}
// A key was pressed while an item in this zone was focused.
this._shouldHandleFocus = true;
}
};
SelectionZone.prototype._onToggleAllClick = function (ev) {
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
if (selectionMode === interfaces_1.SelectionMode.multiple) {
selection.toggleAllSelected();
ev.stopPropagation();
ev.preventDefault();
}
};
SelectionZone.prototype._onToggleClick = function (ev, index) {
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
if (selectionMode === interfaces_1.SelectionMode.multiple) {
selection.toggleIndexSelected(index);
}
else if (selectionMode === interfaces_1.SelectionMode.single) {
var isSelected = selection.isIndexSelected(index);
selection.setChangeEvents(false);
selection.setAllSelected(false);
selection.setIndexSelected(index, !isSelected, true);
selection.setChangeEvents(true);
}
else {
return;
}
ev.stopPropagation();
// NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior
// for checkboxes if you use a checkbox for the toggle.
};
SelectionZone.prototype._onInvokeClick = function (ev, index) {
var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;
if (onItemInvoked) {
onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);
ev.preventDefault();
ev.stopPropagation();
}
};
SelectionZone.prototype._onItemSurfaceClick = function (ev, index) {
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
if (selectionMode === interfaces_1.SelectionMode.multiple) {
if (this._isShiftPressed) {
selection.selectToIndex(index, !isToggleModifierPressed);
}
else if (isToggleModifierPressed) {
selection.toggleIndexSelected(index);
}
else {
this._clearAndSelectIndex(index);
}
}
else if (selectionMode === interfaces_1.SelectionMode.single) {
this._clearAndSelectIndex(index);
}
};
SelectionZone.prototype._onInvokeMouseDown = function (ev, index) {
var selection = this.props.selection;
// Only do work if item is not selected.
if (selection.isIndexSelected(index)) {
return;
}
this._clearAndSelectIndex(index);
};
SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {
if (!this.props.selectionPreservedOnEmptyClick &&
this._isNonHandledClick(ev.target)) {
this.props.selection.setAllSelected(false);
}
};
SelectionZone.prototype._clearAndSelectIndex = function (index) {
var selection = this.props.selection;
var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
if (!isAlreadySingleSelected) {
selection.setChangeEvents(false);
selection.setAllSelected(false);
selection.setIndexSelected(index, true, true);
selection.setChangeEvents(true);
}
};
/**
* We need to track the modifier key states so that when focus events occur, which do not contain
* modifier states in the Event object, we know how to behave.
*/
SelectionZone.prototype._updateModifiers = function (ev) {
this._isShiftPressed = ev.shiftKey;
this._isCtrlPressed = ev.ctrlKey;
this._isMetaPressed = ev.metaKey;
};
SelectionZone.prototype._findItemRoot = function (target) {
var selection = this.props.selection;
while (target !== this.refs.root) {
var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);
var index = Number(indexValue);
if (indexValue !== null && index >= 0 && index < selection.getItems().length) {
break;
}
target = Utilities_1.getParent(target);
}
if (target === this.refs.root) {
return undefined;
}
return target;
};
SelectionZone.prototype._getItemIndex = function (itemRoot) {
return Number(itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME));
};
SelectionZone.prototype._hasAttribute = function (element, attributeName) {
var isToggle = false;
while (!isToggle && element !== this.refs.root) {
isToggle = element.getAttribute(attributeName) === 'true';
element = Utilities_1.getParent(element);
}
return isToggle;
};
SelectionZone.prototype._isInputElement = function (element) {
return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
};
SelectionZone.prototype._isNonHandledClick = function (element) {
var doc = Utilities_1.getDocument();
if (doc && element) {
while (element && element !== doc.documentElement) {
if (Utilities_1.isElementTabbable(element)) {
return false;
}
element = Utilities_1.getParent(element);
}
}
return true;
};
return SelectionZone;
}(Utilities_1.BaseComponent));
SelectionZone.defaultProps = {
layout: new SelectionLayout_1.SelectionLayout(interfaces_1.SelectionDirection.vertical),
isMultiSelectEnabled: true,
isSelectedOnFocus: true,
selectionMode: interfaces_1.SelectionMode.multiple
};
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "ignoreNextFocus", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onMouseDownCapture", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onFocus", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onClick", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onContextMenu", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onDoubleClick", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onKeyDown", null);
exports.SelectionZone = SelectionZone;
});
//# sourceMappingURL=SelectionZone.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 1 | define(["require", "exports", "./interfaces", "./Selection", "./SelectionLayout", "./SelectionZone"], function (require, exports, interfaces_1, Selection_1, SelectionLayout_1, SelectionZone_1) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(interfaces_1); __export(Selection_1); __export(SelectionLayout_1); __export(SelectionZone_1); }); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.SELECTION_CHANGE = 'change'; var SelectionMode; (function (SelectionMode) { SelectionMode[SelectionMode["none"] = 0] = "none"; SelectionMode[SelectionMode["single"] = 1] = "single"; SelectionMode[SelectionMode["multiple"] = 2] = "multiple"; })(SelectionMode = exports.SelectionMode || (exports.SelectionMode = {})); var SelectionDirection; (function (SelectionDirection) { SelectionDirection[SelectionDirection["horizontal"] = 0] = "horizontal"; SelectionDirection[SelectionDirection["vertical"] = 1] = "vertical"; })(SelectionDirection = exports.SelectionDirection || (exports.SelectionDirection = {})); }); //# sourceMappingURL=interfaces.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| PhantomCssInterface.js | 50% | (1 / 2) | 100% | (0 / 0) | 0% | (0 / 1) | 50% | (1 / 2) |
| 1 2 3 4 5 6 7 8 | 2 | define(["require", "exports"], function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); }); //# sourceMappingURL=PhantomCssInterface.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Breadcrumb.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Button.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Calendar.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Callout.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Check.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Checkbox.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| ChoiceGroup.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Color.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| ColorPicker.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| CommandBar.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| ContextualMenu.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| DatePicker.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| DetailsList.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Dialog.js | 37.5% | (3 / 8) | 0% | (0 / 2) | 0% | (0 / 1) | 50% | (3 / 6) | |
| DocumentCard.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Dropdown.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Fabric.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Facepile.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| FocusTrapZone.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| FocusZone.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| GroupedList.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Icon.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Image.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Label.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Layer.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Link.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| List.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| MarqueeSelection.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) | |
| MessageBar.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Modal.js | 37.5% | (3 / 8) | 0% | (0 / 2) | 0% | (0 / 1) | 50% | (3 / 6) | |
| Nav.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Overlay.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Panel.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Persona.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Pickers.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Pivot.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Popup.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| ProgressIndicator.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Rating.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| SearchBox.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Selection.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Slider.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Spinner.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| TeachingBubble.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| TextField.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Toggle.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Tooltip.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| Utilities.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) | |
| VisualTestRoot.js | 23.08% | (12 / 52) | 0% | (0 / 14) | 0% | (0 / 11) | 24% | (12 / 50) | |
| VisualTestState.js | 100% | (2 / 2) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (2 / 2) | |
| index.js | 6.25% | (3 / 48) | 0% | (0 / 2) | 0% | (0 / 1) | 6.52% | (3 / 46) |
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Breadcrumb/index")); //# sourceMappingURL=Breadcrumb.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Button/index")); //# sourceMappingURL=Button.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 8 8 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Calendar/index")); //# sourceMappingURL=Calendar.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 8 8 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Callout/index")); //# sourceMappingURL=Callout.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Check/index")); //# sourceMappingURL=Check.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Checkbox/index")); //# sourceMappingURL=Checkbox.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/ChoiceGroup/index")); //# sourceMappingURL=ChoiceGroup.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./utilities/color/index")); //# sourceMappingURL=Color.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/ColorPicker/index")); //# sourceMappingURL=ColorPicker.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/CommandBar/index")); //# sourceMappingURL=CommandBar.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/ContextualMenu/index")); //# sourceMappingURL=ContextualMenu.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/DatePicker/index")); //# sourceMappingURL=DatePicker.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/DetailsList/index")); //# sourceMappingURL=DetailsList.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Dialog/index")); var index_1 = require("./components/Dialog/index"); exports.default = index_1.Dialog; //# sourceMappingURL=Dialog.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/DocumentCard/index")); //# sourceMappingURL=DocumentCard.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Dropdown/index")); //# sourceMappingURL=Dropdown.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 8 8 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Fabric/index")); //# sourceMappingURL=Fabric.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Facepile/index")); //# sourceMappingURL=Facepile.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/FocusTrapZone/index")); //# sourceMappingURL=FocusTrapZone.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 10 10 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/FocusZone/index")); //# sourceMappingURL=FocusZone.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/GroupedList/index")); //# sourceMappingURL=GroupedList.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Icon/index")); //# sourceMappingURL=Icon.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 12 12 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Image/index")); //# sourceMappingURL=Image.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 8 8 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Label/index")); //# sourceMappingURL=Label.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Layer/index")); //# sourceMappingURL=Layer.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 14 14 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Link/index")); //# sourceMappingURL=Link.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/List/index")); //# sourceMappingURL=List.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/MarqueeSelection/MarqueeSelection")); __export(require("./utilities/selection/index")); //# sourceMappingURL=MarqueeSelection.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/MessageBar/index")); //# sourceMappingURL=MessageBar.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Modal/index")); var index_1 = require("./components/Modal/index"); exports.default = index_1.Modal; //# sourceMappingURL=Modal.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Nav/index")); //# sourceMappingURL=Nav.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Overlay/index")); //# sourceMappingURL=Overlay.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Panel/index")); //# sourceMappingURL=Panel.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Persona/index")); //# sourceMappingURL=Persona.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/pickers/index")); //# sourceMappingURL=Pickers.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Pivot/index")); //# sourceMappingURL=Pivot.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Popup/index")); //# sourceMappingURL=Popup.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/ProgressIndicator/index")); //# sourceMappingURL=ProgressIndicator.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Rating/index")); //# sourceMappingURL=Rating.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/SearchBox/index")); //# sourceMappingURL=SearchBox.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./utilities/selection/index")); //# sourceMappingURL=Selection.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Slider/index")); //# sourceMappingURL=Slider.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Spinner/index")); //# sourceMappingURL=Spinner.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/TeachingBubble/index")); //# sourceMappingURL=TeachingBubble.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/TextField/index")); //# sourceMappingURL=TextField.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Toggle/index")); //# sourceMappingURL=Toggle.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./components/Tooltip/index")); //# sourceMappingURL=Tooltip.js.map |
| 1 2 3 4 5 6 7 8 9 10 | 1 386 386 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("@uifabric/utilities/lib/index")); //# sourceMappingURL=Utilities.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 2 2 2 2 2 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var ReactDOM = require("react-dom");
var VisualTestState_1 = require("./VisualTestState");
var index_1 = require("./utilities/router/index");
var Utilities_1 = require("./Utilities");
Utilities_1.setBaseUrl('./dist/');
var rootElement;
var currentBreakpoint;
var scrollDistance;
var requireContext = require.context('./components', true, /Page.visualtest$/);
// This is mostly taken from the react-website project.
function _routerDidMount() {
if (_hasAnchorLink(window.location.hash)) {
var hash = _extractAnchorLink(window.location.hash);
var el = document.getElementById(hash);
var elRect = el.getBoundingClientRect();
var bodySTop = document.body.scrollTop;
var currentScrollPosition = void 0;
currentScrollPosition = bodySTop + elRect.top;
document.body.scrollTop = currentScrollPosition - scrollDistance;
}
}
function _hasAnchorLink(path) {
return (path.match(/#/g) || []).length > 1;
}
function _extractAnchorLink(path) {
var split = path.split('#');
var cleanedSplit = split.filter(function (value) {
if (value === '') {
return false;
}
else {
return true;
}
});
return cleanedSplit[cleanedSplit.length - 1];
}
function _onLoad() {
// Load the app into this element.
rootElement = rootElement || document.getElementById('content');
ReactDOM.render(React.createElement("div", { style: { display: 'inline-block' } },
React.createElement(index_1.Router, { onNewRouteLoaded: _routerDidMount }, _getAppRoutes())), rootElement);
}
function _getAppRoutes() {
var routes = [];
// Create a route for each top level page, and all of its sub pages
VisualTestState_1.VisualTestState.componentPath.forEach(function (path, pathIndex) {
var componentNameIndex = path.lastIndexOf('/');
var name = path.substr(componentNameIndex + 1);
var url = name.substr(0, name.lastIndexOf('Page.visualtest'));
routes.push(React.createElement(index_1.Route, { key: pathIndex, path: '#/' + url, getComponent: getPath(path) }));
});
return routes;
}
function getPath(path) {
return (function (cb) { return require.ensure([], function () { return cb(requireContext(path).default); }); });
}
function _onUnload() {
if (rootElement) {
ReactDOM.unmountComponentAtNode(rootElement);
}
}
var isReady = document.readyState === 'interactive' || document.readyState === 'complete';
if (isReady) {
_onLoad();
}
else {
window.onload = _onLoad;
}
window.onunload = _onUnload;
//# sourceMappingURL=VisualTestRoot.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VisualTestState = {
componentPath: [
'./Button/CommandButtonPage.visualtest',
'./Button/CompoundButtonPage.visualtest',
'./Button/ContextualButtonPage.visualtest',
'./Button/DefaultButtonPage.visualtest',
'./Button/PrimaryButtonPage.visualtest',
'./Checkbox/CheckboxPage.visualtest',
'./ChoiceGroup/ChoiceGroupPage.visualtest',
'./ContextualMenu/ContextualMenuPage.visualtest'
]
};
//# sourceMappingURL=VisualTestState.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1 2 2 | /** * WARNING: This entry should NOT be imported for production purposes. This entry forces every control to be * parsed and available at load time, which is not necessary for most cases. */ "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Breadcrumb")); __export(require("./Button")); __export(require("./Calendar")); __export(require("./Callout")); __export(require("./Checkbox")); __export(require("./ChoiceGroup")); __export(require("./ColorPicker")); __export(require("./CommandBar")); __export(require("./ContextualMenu")); __export(require("./DatePicker")); __export(require("./DetailsList")); __export(require("./Dialog")); __export(require("./DocumentCard")); __export(require("./Dropdown")); __export(require("./Fabric")); __export(require("./Facepile")); __export(require("./FocusTrapZone")); __export(require("./FocusZone")); __export(require("./GroupedList")); __export(require("./Icon")); __export(require("./Image")); __export(require("./Label")); __export(require("./Layer")); __export(require("./Link")); __export(require("./List")); __export(require("./MessageBar")); __export(require("./MarqueeSelection")); __export(require("./Nav")); __export(require("./Overlay")); __export(require("./Panel")); __export(require("./Pickers")); __export(require("./Persona")); __export(require("./Pivot")); __export(require("./ProgressIndicator")); __export(require("./Rating")); __export(require("./SearchBox")); __export(require("./Slider")); __export(require("./Spinner")); __export(require("./TeachingBubble")); __export(require("./TextField")); __export(require("./Toggle")); __export(require("./Tooltip")); __export(require("./Utilities")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BaseStore.js | 47.06% | (8 / 17) | 0% | (0 / 2) | 20% | (1 / 5) | 50% | (8 / 16) | |
| ConnectedHost.js | 11.36% | (10 / 88) | 15.87% | (10 / 63) | 4.76% | (1 / 21) | 12.5% | (10 / 80) | |
| DirectionalHint.js | 100% | (17 / 17) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (17 / 17) | |
| IAccessiblePopupProps.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| ISubscribable.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| StoreHost.js | 28.57% | (8 / 28) | 25% | (4 / 16) | 11.11% | (1 / 9) | 32% | (8 / 25) | |
| StoreSet.js | 18.75% | (3 / 16) | 100% | (0 / 0) | 0% | (0 / 5) | 18.75% | (3 / 16) | |
| VisualTest.js | 100% | (2 / 2) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (2 / 2) | |
| connect.js | 57.14% | (4 / 7) | 100% | (0 / 0) | 0% | (0 / 2) | 66.67% | (4 / 6) | |
| storeKey.js | 50% | (2 / 4) | 100% | (0 / 0) | 0% | (0 / 1) | 66.67% | (2 / 3) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _instanceId = 0;
var BaseStore = (function () {
function BaseStore() {
this._callbacks = {};
}
BaseStore.prototype.subscribe = function (onChange) {
var _this = this;
var id = _instanceId++;
this._callbacks[id] = onChange;
return { dispose: function () { return delete _this._callbacks[id]; } };
};
BaseStore.prototype.emitChange = function () {
for (var id in this._callbacks) {
if (this._callbacks.hasOwnProperty(id)) {
this._callbacks[id]();
}
}
};
return BaseStore;
}());
exports.BaseStore = BaseStore;
//# sourceMappingURL=BaseStore.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 4 4 4 1 4 4 4 4 4 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../Utilities");
// Track all components that require changes.
var _changedComponents;
var ConnectedHost = (function (_super) {
__extends(ConnectedHost, _super);
function ConnectedHost(props) {
var _this = _super.call(this, props) || this;
_this.state = {
props: null
};
return _this;
}
ConnectedHost.prototype.componentWillMount = function () {
var _this = this;
if (this.props.storesToSubscribe && this.props.storesToSubscribe.length > 0) {
if (!this.context.stores) {
throw "A connected component was hosted in an environment where no stores were hosted. Use the StoreHost to host components.";
}
// Resolve and subscribe to stores.
this._stores = this.props.storesToSubscribe.map(function (storeKey) {
var store = _this.context.stores.getStore(storeKey);
if (!store) {
throw "The \"" + storeKey.name + "\" store was required by a connected component, but not exposed.";
}
_this._disposables.push(store.subscribe(_this._onStoreChanged));
return store;
});
}
// We can only initialize state at this point, where context has been resolved.
this.state = {
props: this._getComponentProps(this.props)
};
};
ConnectedHost.prototype.componentDidMount = function () {
this._isMounted = true;
};
ConnectedHost.prototype.componentWillUnmount = function () {
this._isMounted = false;
};
ConnectedHost.prototype.componentWillReceiveProps = function (newProps) {
this._updateProps(newProps);
};
ConnectedHost.prototype.shouldComponentUpdate = function (newProps, newState) {
var inputPropsHaveChanged = !Utilities_1.shallowCompare(this.props.componentProps, newProps.componentProps);
var computedPropsHaveChanged = !Utilities_1.shallowCompare(this.state.props, newState.props);
var shouldUpdate = inputPropsHaveChanged || computedPropsHaveChanged;
return shouldUpdate;
};
ConnectedHost.prototype.render = function () {
var Component = this.props.component;
var props = this.state.props;
return props ? React.createElement(Component, __assign({}, props)) : null;
};
ConnectedHost.prototype._onStoreChanged = function () {
var storesToSubscribe = this.props.storesToSubscribe;
if (!storesToSubscribe || storesToSubscribe.length < 2) {
this._updateProps();
}
else if (!this._changeEnqueued) {
if (!_changedComponents) {
_changedComponents = [];
this._async.setImmediate(function () {
_changedComponents.forEach(function (comp) { return comp._updateProps(); });
_changedComponents = null;
});
}
_changedComponents.push(this);
this._changeEnqueued = true;
}
};
ConnectedHost.prototype._updateProps = function (props) {
this._changeEnqueued = false;
props = this._getComponentProps(props || this.props);
this.setState({ props: props });
};
ConnectedHost.prototype._getComponentProps = function (props) {
var newProps = Utilities_1.assign({}, props.componentProps, props.getProps.apply(props, [props.componentProps].concat(this._stores)));
return newProps;
};
return ConnectedHost;
}(Utilities_1.BaseComponent));
ConnectedHost.contextTypes = {
stores: React.PropTypes.object
};
__decorate([
Utilities_1.autobind
], ConnectedHost.prototype, "_onStoreChanged", null);
__decorate([
Utilities_1.autobind
], ConnectedHost.prototype, "_updateProps", null);
exports.ConnectedHost = ConnectedHost;
//# sourceMappingURL=ConnectedHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DirectionalHint;
(function (DirectionalHint) {
/**
* Appear above the target element, with the left edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["topLeftEdge"] = 0] = "topLeftEdge";
/**
* Appear above the target element, with the centers of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["topCenter"] = 1] = "topCenter";
/**
* Appear above the target element, with the right edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["topRightEdge"] = 2] = "topRightEdge";
/**
* Appear above the target element, aligning with the target element such that the callout tends toward the center of the screen.
*/
DirectionalHint[DirectionalHint["topAutoEdge"] = 3] = "topAutoEdge";
/**
* Appear below the target element, with the left edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["bottomLeftEdge"] = 4] = "bottomLeftEdge";
/**
* Appear below the target element, with the centers of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["bottomCenter"] = 5] = "bottomCenter";
/**
* Appear below the target element, with the right edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["bottomRightEdge"] = 6] = "bottomRightEdge";
/**
* Appear below the target element, aligning with the target element such that the callout tends toward the center of the screen.
*/
DirectionalHint[DirectionalHint["bottomAutoEdge"] = 7] = "bottomAutoEdge";
/**
* Appear to the left of the target element, with the top edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["leftTopEdge"] = 8] = "leftTopEdge";
/**
* Appear to the left of the target element, with the centers of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["leftCenter"] = 9] = "leftCenter";
/**
* Appear to the left of the target element, with the bottom edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["leftBottomEdge"] = 10] = "leftBottomEdge";
/**
* Appear to the right of the target element, with the top edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["rightTopEdge"] = 11] = "rightTopEdge";
/**
* Appear to the right of the target element, with the centers of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["rightCenter"] = 12] = "rightCenter";
/**
* Appear to the right of the target element, with the bottom edges of the callout and target aligning.
*/
DirectionalHint[DirectionalHint["rightBottomEdge"] = 13] = "rightBottomEdge";
})(DirectionalHint = exports.DirectionalHint || (exports.DirectionalHint = {}));
//# sourceMappingURL=DirectionalHint.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=IAccessiblePopupProps.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=ISubscribable.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../Utilities");
var StoreHost = (function (_super) {
__extends(StoreHost, _super);
function StoreHost() {
return _super !== null && _super.apply(this, arguments) || this;
}
StoreHost.prototype.getChildContext = function () {
var parentStores = this.context.stores;
var currentStores = this.props.stores;
return { stores: parentStores ? parentStores.merge(currentStores) : currentStores };
};
StoreHost.prototype.render = function () {
return React.Children.only(this.props.children);
};
return StoreHost;
}(Utilities_1.BaseComponent));
StoreHost.contextTypes = {
stores: React.PropTypes.object
};
StoreHost.childContextTypes = {
stores: React.PropTypes.object
};
exports.StoreHost = StoreHost;
//# sourceMappingURL=StoreHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 2 2 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../Utilities");
var StoreSet = (function () {
function StoreSet() {
this._stores = {};
}
StoreSet.prototype.add = function (key, value) {
this._stores[key.id] = value;
return this;
};
StoreSet.prototype.getStore = function (key) {
return this._stores[key.id];
};
StoreSet.prototype.merge = function (stores) {
var mergedStoreSet = new StoreSet();
mergedStoreSet._stores = Utilities_1.assign({}, this._stores, stores);
return mergedStoreSet;
};
return StoreSet;
}());
exports.StoreSet = StoreSet;
//# sourceMappingURL=StoreSet.js.map
|
| 1 2 3 4 5 6 7 | 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.baseUrl = 'http://localhost:43210/visualtest.html?#/';
//# sourceMappingURL=VisualTest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 2 2 2 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ConnectedHost_1 = require("./ConnectedHost");
function connect(component, storesToSubscribe, getProps) {
return function (props) { return (React.createElement(ConnectedHost_1.ConnectedHost, { component: component, componentProps: props, getProps: getProps, storesToSubscribe: storesToSubscribe })); };
}
exports.connect = connect;
//# sourceMappingURL=connect.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../Utilities");
/**
* Store keys are a very simple abstraction that maps a string name to an interface type.
* The enables a type-safe contract for store dependencies when you connect dumb components
* to stores.
*
* @example
* let selectionKey = storeKey<ISelection>('selection');
*
* let stores = new StoreSet()
* .add(selectionKey, new Selection());
*
* <StoreHost stores={ stores }>
* ...
* </StoreHost>
*
* connect(DumbComponent, [ selectionKey ], (props, selection) => ({
* isSelected: selection.getSelected(props.item.key)
* });
*
* Note that the "selection" reference in the connect callback would be of type ISelection due
* to the selectionKey reference, and you will get TypeScript errors by referring to selection
* member that aren't in that interface.
*/
exports.storeKey = function (name) { return ({ name: name, id: Utilities_1.getId(name) }); };
//# sourceMappingURL=storeKey.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Breadcrumb.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Breadcrumb.js | 8.33% | (9 / 108) | 9.86% | (7 / 71) | 4.55% | (1 / 22) | 8.82% | (9 / 102) | |
| Breadcrumb.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| BreadcrumbPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Breadcrumb.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | 8 8 8 1 8 8 8 8 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var ContextualMenu_1 = require("../../ContextualMenu");
var Link_1 = require("../../Link");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var styles = require("./Breadcrumb.scss");
var OVERFLOW_KEY = 'overflow';
var OVERFLOW_WIDTH = 44;
var Breadcrumb = (function (_super) {
__extends(Breadcrumb, _super);
function Breadcrumb(props) {
var _this = _super.call(this, props) || this;
_this._id = Utilities_1.getId('Breadcrumb');
_this.state = _this._getStateFromProps(props);
return _this;
}
Breadcrumb.prototype.componentDidMount = function () {
this._updateItemMeasurements();
this._updateRenderedItems();
this._events.on(window, 'resize', this._updateRenderedItems);
};
Breadcrumb.prototype.componentWillReceiveProps = function (nextProps) {
this.setState(this._getStateFromProps(nextProps));
this._breadcrumbItemWidths = null;
};
Breadcrumb.prototype.componentDidUpdate = function (prevProps, prevStates) {
if (!this._breadcrumbItemWidths) {
this._updateItemMeasurements();
this._updateRenderedItems();
}
};
Breadcrumb.prototype.render = function () {
var _this = this;
var className = this.props.className;
var _a = this.state, isOverflowOpen = _a.isOverflowOpen, overflowAnchor = _a.overflowAnchor, renderedItems = _a.renderedItems, renderedOverflowItems = _a.renderedOverflowItems;
var overflowMenuId = this._id + '-overflow';
var _b = this.props.onRenderItem, onRenderItem = _b === void 0 ? this._onRenderItem : _b;
return (React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb', className, styles.root), ref: 'renderingArea' },
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement("ul", { className: Utilities_1.css('ms-Breadcrumb-list', styles.list) },
renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-overflow', styles.overflow), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More', styles.overflowButton), onClick: this._onOverflowClicked, "data-is-focusable": true, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null }),
React.createElement("i", { className: Utilities_1.css('ms-Breadcrumb-chevron ms-Icon', styles.chevron, Utilities_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }))) : (null),
renderedItems.map(function (item, index) { return (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-listItem', styles.listItem), key: item.key || String(index), ref: item.key || String(index) },
onRenderItem(item, _this._defaultRenderItem),
React.createElement("i", { className: Utilities_1.css('ms-Breadcrumb-chevron ms-Icon', styles.chevron, Utilities_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }))); }))),
isOverflowOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, { targetElement: overflowAnchor, isBeakVisible: true, items: renderedOverflowItems.map(function (item, index) { return ({
name: item.text,
key: item.key,
onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,
href: item.href
}); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed })) : (null)));
};
Breadcrumb.prototype._onRenderItem = function (item, defaultRender) {
return this._defaultRenderItem(item);
};
Breadcrumb.prototype._defaultRenderItem = function (item) {
if (item.onClick || item.href) {
return (React.createElement(Link_1.Link, { className: Utilities_1.css('ms-Breadcrumb-itemLink', styles.itemLink), href: item.href, onClick: this._onBreadcrumbClicked.bind(this, item) }, item.text));
}
else {
return (React.createElement("span", { className: Utilities_1.css('ms-Breadcrumb-item', styles.item) }, item.text));
}
};
Breadcrumb.prototype._onOverflowClicked = function (ev) {
this.setState({
'isOverflowOpen': !this.state.isOverflowOpen,
'overflowAnchor': ev.currentTarget
});
};
Breadcrumb.prototype._onOverflowDismissed = function (ev) {
this.setState({
'isOverflowOpen': false,
'overflowAnchor': null
});
};
Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
if (item.onClick) {
item.onClick(ev, item);
}
this.setState({
'isOverflowOpen': false
});
};
Breadcrumb.prototype._updateItemMeasurements = function () {
var items = this.props.items;
if (!this._breadcrumbItemWidths) {
this._breadcrumbItemWidths = {};
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!this._breadcrumbItemWidths[item.key]) {
var el = this.refs[item.key];
this._breadcrumbItemWidths[item.key] = el.getBoundingClientRect().width;
}
}
};
Breadcrumb.prototype._updateRenderedItems = function () {
var _a = this.props, items = _a.items, maxDisplayedItems = _a.maxDisplayedItems;
var renderingArea = this.refs.renderingArea;
var renderedItems = [];
var renderedOverflowItems = [].concat(items);
var consumedWidth = 0;
var style = window.getComputedStyle(renderingArea);
var availableWidth = renderingArea.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
availableWidth -= OVERFLOW_WIDTH;
var i;
var minIndex = Math.max(0, renderedOverflowItems.length - maxDisplayedItems);
for (i = renderedOverflowItems.length - 1; i >= minIndex; i--) {
var item = renderedOverflowItems[i];
var itemWidth = this._breadcrumbItemWidths[item.key];
if ((consumedWidth + itemWidth) >= availableWidth) {
break;
}
else {
consumedWidth += itemWidth;
}
}
renderedItems = renderedOverflowItems.splice(i + 1);
this.setState({
isOverflowOpen: this.state.isOverflowOpen,
overflowAnchor: this.state.overflowAnchor,
renderedItems: renderedItems,
renderedOverflowItems: renderedOverflowItems,
});
};
Breadcrumb.prototype._getStateFromProps = function (nextProps) {
return {
isOverflowOpen: false,
overflowAnchor: null,
renderedItems: nextProps.items || [],
renderedOverflowItems: null
};
};
return Breadcrumb;
}(Utilities_1.BaseComponent));
Breadcrumb.defaultProps = {
items: [],
maxDisplayedItems: 999
};
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onRenderItem", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_defaultRenderItem", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onOverflowClicked", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onOverflowDismissed", null);
__decorate([
Utilities_1.autobind
], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
exports.Breadcrumb = Breadcrumb;
//# sourceMappingURL=Breadcrumb.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_0a65bb7e',
list: 'list_0a65bb7e',
chevron: 'chevron_0a65bb7e',
listItem: 'listItem_0a65bb7e',
item: 'item_0a65bb7e',
itemLink: 'itemLink_0a65bb7e',
overflow: 'overflow_0a65bb7e',
overflowButton: 'overflowButton_0a65bb7e',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_0a65bb7e{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.list_0a65bb7e{white-space:nowrap;padding:0;margin:0}.chevron_0a65bb7e{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";vertical-align:top;margin:11px 0;line-height:1}.listItem_0a65bb7e{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block;position:relative}.listItem_0a65bb7e:last-of-type .chevron_0a65bb7e{display:none}.listItem_0a65bb7e .itemLink_0a65bb7e,.listItem_0a65bb7e .item_0a65bb7e{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;padding:0 8px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}.overflow_0a65bb7e{display:inline-block;position:relative}.overflowButton_0a65bb7e{font-size:16px;display:inline-block;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";padding:9px 8px;cursor:pointer;vertical-align:top;line-height:1}.overflowButton_0a65bb7e:hover{cursor:pointer;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_0a65bb7e:hover{cursor:default}.root_0a65bb7e .itemLink_0a65bb7e:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:initial;cursor:pointer}.root_0a65bb7e .itemLink_0a65bb7e:focus{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_0a65bb7e .itemLink_0a65bb7e:active{outline:transparent;background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemLink_0a65bb7e,.overflowButton_0a65bb7e{text-decoration:none;outline:transparent}@media screen and (max-width:639px){.listItem_0a65bb7e .itemLink_0a65bb7e{font-size:17px}.chevron_0a65bb7e{font-size:10px;margin:8px 0}.overflowButton_0a65bb7e{font-size:15px;padding:6px 8px;line-height:1}}@media screen and (max-width:479px){.listItem_0a65bb7e .itemLink_0a65bb7e{font-size:14px;max-width:116px}.chevron_0a65bb7e{font-size:8px;margin:7px 0}.overflowButton_0a65bb7e{padding:4px 6px}}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Breadcrumb.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Breadcrumb_Basic_Example_1 = require("./examples/Breadcrumb.Basic.Example");
var BreadcrumbBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx');
var BreadcrumbPage = (function (_super) {
__extends(BreadcrumbPage, _super);
function BreadcrumbPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
BreadcrumbPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Breadcrumb', componentName: 'BreadcrumbExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Simple breadcrumb', code: BreadcrumbBasicExampleCode },
React.createElement(Breadcrumb_Basic_Example_1.BreadcrumbBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy."),
React.createElement("p", null, "Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Breadcrumb/Breadcrumb.html' }, "Fabric JS"), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use Breadcrumbs as a primary way to navigate an app or site."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return BreadcrumbPage;
}(React.Component));
exports.BreadcrumbPage = BreadcrumbPage;
//# sourceMappingURL=BreadcrumbPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 6 6 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Breadcrumb")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BaseButton.js | 8.85% | (10 / 113) | 9.52% | (10 / 105) | 5% | (1 / 20) | 9.43% | (10 / 106) | |
| BaseButton.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| Button.Props.js | 100% | (14 / 14) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (14 / 14) | |
| Button.js | 20.45% | (9 / 44) | 29.17% | (7 / 24) | 11.11% | (1 / 9) | 22.5% | (9 / 40) | |
| ButtonPage.js | 17.78% | (8 / 45) | 30.77% | (4 / 13) | 11.11% | (1 / 9) | 19.05% | (8 / 42) | |
| CommandButton.visualtest.js | 20% | (3 / 15) | 100% | (0 / 0) | 0% | (0 / 7) | 21.43% | (3 / 14) | |
| CommandButtonPage.visualtest.js | 31.82% | (7 / 22) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.84% | (7 / 19) | |
| CompoundButton.visualtest.js | 20% | (3 / 15) | 100% | (0 / 0) | 0% | (0 / 7) | 21.43% | (3 / 14) | |
| CompoundButtonPage.visualtest.js | 31.82% | (7 / 22) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.84% | (7 / 19) | |
| ContextualButton.visualtest.js | 17.65% | (3 / 17) | 100% | (0 / 0) | 0% | (0 / 7) | 18.75% | (3 / 16) | |
| ContextualButtonPage.visualtest.js | 31.82% | (7 / 22) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.84% | (7 / 19) | |
| DefaultButton.visualtest.js | 18.75% | (3 / 16) | 100% | (0 / 0) | 0% | (0 / 8) | 20% | (3 / 15) | |
| DefaultButtonPage.visualtest.js | 30.43% | (7 / 23) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 35% | (7 / 20) | |
| PrimaryButton.visualtest.js | 20% | (3 / 15) | 100% | (0 / 0) | 0% | (0 / 7) | 21.43% | (3 / 14) | |
| PrimaryButtonPage.visualtest.js | 31.82% | (7 / 22) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.84% | (7 / 19) | |
| index.js | 23.08% | (3 / 13) | 0% | (0 / 2) | 0% | (0 / 1) | 27.27% | (3 / 11) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | 16 16 16 1 16 16 16 16 16 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Icon_1 = require("../../Icon");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var ContextualMenu_1 = require("../../ContextualMenu");
var styles = require("./BaseButton.scss");
var BaseButton = (function (_super) {
__extends(BaseButton, _super);
function BaseButton(props, rootClassName) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
rootProps: null,
icon: 'iconProps',
menuIconName: 'menuIconProps'
});
_this._labelId = Utilities_1.getId();
_this._descriptionId = Utilities_1.getId();
_this._ariaDescriptionId = Utilities_1.getId();
_this.state = {
menuProps: null
};
return _this;
}
BaseButton.prototype.render = function () {
var _a = this.props, description = _a.description, ariaLabel = _a.ariaLabel, ariaDescription = _a.ariaDescription, href = _a.href, disabled = _a.disabled, classNames = _a.classNames;
var _b = this, _ariaDescriptionId = _b._ariaDescriptionId, _labelId = _b._labelId, _descriptionId = _b._descriptionId;
var renderAsAnchor = !!href;
var tag = renderAsAnchor ? 'a' : 'button';
var nativeProps = Utilities_1.getNativeProps(Utilities_1.assign({}, this.props.rootProps, this.props), renderAsAnchor ? Utilities_1.anchorProperties : Utilities_1.buttonProperties, [
'disabled' // Let disabled buttons be focused and styled as disabled.
]);
// Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby
// otherwise default to null.
var ariaDescribedBy;
if (ariaDescription) {
ariaDescribedBy = _ariaDescriptionId;
}
else if (description) {
ariaDescribedBy = _descriptionId;
}
else if (nativeProps['aria-describedby']) {
ariaDescribedBy = nativeProps['aria-describedby'];
}
else {
ariaDescribedBy = null;
}
var buttonProps = Utilities_1.assign(nativeProps, {
className: Utilities_1.css(styles.root, this.props.className, classNames.base, classNames.variant, classNames.root, (_c = {
'disabled': disabled
},
_c[classNames.isDisabled] = disabled,
_c[classNames.isEnabled] = !disabled,
_c)),
ref: this._resolveRef('_buttonElement'),
'disabled': disabled,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabel ? null : _labelId,
'aria-describedby': ariaDescribedBy,
'aria-disabled': disabled
});
// Override onClick if contextualMenuItems passed in. Eventually allow _onToggleMenu to
// be assigned to split button click if onClick already has a value
if (this.props.menuProps) {
Utilities_1.assign(buttonProps, { 'onClick': this._onToggleMenu });
}
return this._onRenderContent(tag, buttonProps);
var _c;
};
BaseButton.prototype.focus = function () {
if (this._buttonElement) {
this._buttonElement.focus();
}
};
BaseButton.prototype._onRenderContent = function (tag, buttonProps) {
var props = this.props;
var classNames = props.classNames, menuIconName = props.menuIconName, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderText, onRenderText = _b === void 0 ? this._onRenderText : _b, _c = props.onRenderDescription, onRenderDescription = _c === void 0 ? this._onRenderDescription : _c, _d = props.onRenderAriaDescription, onRenderAriaDescription = _d === void 0 ? this._onRenderAriaDescription : _d, _e = props.onRenderChildren, onRenderChildren = _e === void 0 ? this._onRenderChildren : _e, _f = props.onRenderMenu, onRenderMenu = _f === void 0 ? this._onRenderMenu : _f, _g = props.onRenderMenuIcon, onRenderMenuIcon = _g === void 0 ? this._onRenderMenuIcon : _g;
var className = Utilities_1.css(classNames.base + '-flexContainer', styles.flexContainer, classNames.flexContainer);
return React.createElement(tag, buttonProps, React.createElement('div', { className: className }, onRenderIcon(props, this._onRenderIcon), onRenderText(props, this._onRenderText), onRenderDescription(props, this._onRenderDescription), onRenderAriaDescription(props, this._onRenderAriaDescription), onRenderChildren(props, this._onRenderChildren), (menuProps || menuIconName || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon), this.state.menuProps && onRenderMenu(menuProps, this._onRenderMenu)));
};
BaseButton.prototype._onRenderIcon = function (buttonProps, defaultRender) {
var _a = this.props, classNames = _a.classNames, icon = _a.icon, iconProps = _a.iconProps;
if (icon || iconProps) {
iconProps = iconProps || {
iconName: icon
};
}
return iconProps && (React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: Utilities_1.css(classNames.base + "-icon", classNames.icon, iconProps.className) })));
};
BaseButton.prototype._onRenderText = function () {
var _a = this.props, classNames = _a.classNames, children = _a.children, text = _a.text;
// For backwards compat, we should continue to take in the text content from children.
if (text === undefined && typeof (children) === 'string') {
text = children;
}
return text && (React.createElement("span", { className: Utilities_1.css(classNames.base + "-label", classNames.label), id: this._labelId }, text));
};
BaseButton.prototype._onRenderChildren = function () {
var children = this.props.children;
// If children is just a string, either it or the text will be rendered via onRenderLabel
// If children is another component, it will be rendered after text
if (typeof (children) === 'string') {
return null;
}
return children;
};
BaseButton.prototype._onRenderDescription = function () {
var _a = this.props, classNames = _a.classNames, description = _a.description;
// ms-Button-description is only shown when the button type is compound.
// In other cases it will not be displayed.
return description ? (React.createElement("span", { className: Utilities_1.css(classNames.base + "-description", classNames.description), id: this._descriptionId }, description)) : (null);
};
BaseButton.prototype._onRenderAriaDescription = function () {
var ariaDescription = this.props.ariaDescription;
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
// otherwise it will be assigned to descriptionSpan.
return ariaDescription ? (React.createElement("span", { className: styles.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)) : (null);
};
BaseButton.prototype._onRenderMenuIcon = function (props) {
var _a = this.props, classNames = _a.classNames, menuIconProps = _a.menuIconProps, menuIconName = _a.menuIconName;
if (menuIconProps === undefined) {
menuIconProps = {
iconName: menuIconName === undefined ? 'ChevronDown' : menuIconName
};
}
return (menuIconProps ?
React.createElement(Icon_1.Icon, __assign({}, menuIconProps, { className: Utilities_1.css(classNames.base + "-icon", classNames.menuIcon, menuIconProps.className) }))
:
null);
};
BaseButton.prototype._onRenderMenu = function (menuProps) {
return (React.createElement(ContextualMenu_1.ContextualMenu, { className: Utilities_1.css('ms-BaseButton-menuHost'), isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, items: menuProps.items, target: this._buttonElement, labelElementId: this._labelId, onDismiss: this._onToggleMenu }));
};
BaseButton.prototype._onToggleMenu = function () {
var menuProps = this.props.menuProps;
var currentMenuProps = this.state.menuProps;
this.setState({ menuProps: currentMenuProps ? null : menuProps });
};
return BaseButton;
}(Utilities_1.BaseComponent));
BaseButton.defaultProps = {
classNames: {
base: 'ms-Button',
variant: '',
isEnabled: '',
isDisabled: ''
}
};
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderIcon", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderText", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderChildren", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderDescription", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderAriaDescription", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderMenuIcon", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onRenderMenu", null);
__decorate([
Utilities_1.autobind
], BaseButton.prototype, "_onToggleMenu", null);
exports.BaseButton = BaseButton;
//# sourceMappingURL=BaseButton.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
flexContainer: 'flexContainer_a920f7da',
root: 'root_a920f7da',
screenReaderOnly: 'screenReaderOnly_a920f7da',
};
load_themed_styles_1.loadStyles([{ "rawString": ".flexContainer_a920f7da{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.root_a920f7da{outline:transparent}.screenReaderOnly_a920f7da{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=BaseButton.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ElementType;
(function (ElementType) {
/** <button> element. */
ElementType[ElementType["button"] = 0] = "button";
/** <a> element. */
ElementType[ElementType["anchor"] = 1] = "anchor";
})(ElementType = exports.ElementType || (exports.ElementType = {}));
var ButtonType;
(function (ButtonType) {
ButtonType[ButtonType["normal"] = 0] = "normal";
ButtonType[ButtonType["primary"] = 1] = "primary";
ButtonType[ButtonType["hero"] = 2] = "hero";
ButtonType[ButtonType["compound"] = 3] = "compound";
ButtonType[ButtonType["command"] = 4] = "command";
ButtonType[ButtonType["icon"] = 5] = "icon";
ButtonType[ButtonType["default"] = 6] = "default";
})(ButtonType = exports.ButtonType || (exports.ButtonType = {}));
//# sourceMappingURL=Button.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Button_Props_1 = require("./Button.Props");
var DefaultButton_1 = require("./DefaultButton/DefaultButton");
var CommandButton_1 = require("./CommandButton/CommandButton");
var CompoundButton_1 = require("./CompoundButton/CompoundButton");
var IconButton_1 = require("./IconButton/IconButton");
var PrimaryButton_1 = require("./PrimaryButton/PrimaryButton");
/**
* This class is deprecated. Use the individual *Button components instead.
* @deprecated
*/
var Button = (function (_super) {
__extends(Button, _super);
function Button(props) {
var _this = _super.call(this, props) || this;
/**
* Set this BaseComponent._resolveComponentRef to false, bypassing resolution of componentRef.
*/
_this._shouldUpdateComponentRef = false;
Utilities_1.warn("The Button component has been deprecated. Use specific variants instead. " +
"(PrimaryButton, DefaultButton, IconButton, CommandButton, etc.)");
return _this;
}
Button.prototype.render = function () {
var props = this.props;
switch (props.buttonType) {
case Button_Props_1.ButtonType.command:
return React.createElement(CommandButton_1.CommandButton, __assign({}, props));
case Button_Props_1.ButtonType.compound:
return React.createElement(CompoundButton_1.CompoundButton, __assign({}, props));
case Button_Props_1.ButtonType.icon:
return React.createElement(IconButton_1.IconButton, __assign({}, props));
case Button_Props_1.ButtonType.primary:
return React.createElement(PrimaryButton_1.PrimaryButton, __assign({}, props));
default:
return React.createElement(DefaultButton_1.DefaultButton, __assign({}, props));
}
};
return Button;
}(Utilities_1.BaseComponent));
exports.Button = Button;
//# sourceMappingURL=Button.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Button_Default_Example_1 = require("./examples/Button.Default.Example");
var Button_ContextualMenu_Example_1 = require("./examples/Button.ContextualMenu.Example");
var Button_Primary_Example_1 = require("./examples/Button.Primary.Example");
var Button_Compound_Example_1 = require("./examples/Button.Compound.Example");
var Button_Command_Example_1 = require("./examples/Button.Command.Example");
var Button_Icon_Example_1 = require("./examples/Button.Icon.Example");
var Button_Anchor_Example_1 = require("./examples/Button.Anchor.Example");
var Button_ScreenReader_Example_1 = require("./examples/Button.ScreenReader.Example");
require("./examples/Button.Basic.Example.scss");
var Link_1 = require("../../Link");
var ButtonDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx');
var ButtonPrimaryExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx');
var ButtonCompoundExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx');
var ButtonCommandExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx');
var ButtonIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx');
var ButtonAnchorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx');
var ButtonScreenReaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx');
var ButtonContextualMenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx');
var ButtonPage = (function (_super) {
__extends(ButtonPage, _super);
function ButtonPage() {
var _this = _super.call(this) || this;
_this.state = {
areButtonsDisabled: false
};
return _this;
}
ButtonPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Button', componentName: 'ButtonExample', exampleCards: React.createElement("div", null,
React.createElement(Checkbox_1.Checkbox, { label: 'Disable buttons', checked: this.state.areButtonsDisabled, onChange: this._onDisabledChanged.bind(this) }),
React.createElement(example_app_base_1.ExampleCard, { title: 'Default Button', code: ButtonDefaultExampleCode },
React.createElement(Button_Default_Example_1.ButtonDefaultExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Primary Button', code: ButtonPrimaryExampleCode },
React.createElement(Button_Primary_Example_1.ButtonPrimaryExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Compound Button', code: ButtonCompoundExampleCode },
React.createElement(Button_Compound_Example_1.ButtonCompoundExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Command Button', code: ButtonCommandExampleCode },
React.createElement(Button_Command_Example_1.ButtonCommandExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon Button', code: ButtonIconExampleCode },
React.createElement(Button_Icon_Example_1.ButtonIconExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Contextual Menu Button', code: ButtonContextualMenuExampleCode },
React.createElement(Button_ContextualMenu_Example_1.ButtonContextualMenuExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Button Like Anchor', code: ButtonAnchorExampleCode },
React.createElement(Button_Anchor_Example_1.ButtonAnchorExample, { disabled: this.state.areButtonsDisabled })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Button with Aria Description for Screen Reader', code: ButtonScreenReaderExampleCode },
React.createElement(Button_ScreenReader_Example_1.ButtonScreenReaderExample, { disabled: this.state.areButtonsDisabled }))), propertiesTables: React.createElement("div", null,
React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Button/Button.Props.ts')
] }),
React.createElement("p", null,
"Besides the above properties, the ",
React.createElement("code", null, "Button"),
" component accepts all properties that the React ",
React.createElement("code", null, "button"),
" and ",
React.createElement("code", null, "a"),
" components accept.")), overview: React.createElement("div", null,
React.createElement("p", null, "Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),
React.createElement("p", null, "When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements."),
React.createElement("p", null, "While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow."),
React.createElement("p", null,
"Note that both iconProps and menuIconProps take ",
React.createElement(Link_1.Link, { href: '#/examples/icon' }, "IIconProps"),
" to specify name and type.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Button/Button.html' }, "Fabric JS"), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Make sure the label conveys a clear purpose of the button to the user."),
React.createElement("li", null, "Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word."),
React.createElement("li", null, "Buttons should always include a noun if there is any room for interpretation about what the verb operates on."),
React.createElement("li", null, "Consider the affect localization will have on the button and what will happen to components around it."),
React.createElement("li", null, "If the button\u2019s label content is dynamic, consider how the button will resize and what will happen to components around it."),
React.createElement("li", null, "Use only a single line of text in the label of the button."),
React.createElement("li", null, "Expose only one or two buttons to the user at a time, for example, \"Accept\" and \"Cancel\". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions."),
React.createElement("li", null, "Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds."),
React.createElement("li", null, "\"Submit\", \"OK\", and \"Apply\" buttons should always be styled as primary buttons. When \"Reset\" or \"Cancel\" buttons appear alongside one of the above, they should be styled as secondary buttons."),
React.createElement("li", null, "Default buttons should always perform safe operations. For example, a default button should never delete."),
React.createElement("li", null, "Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use generic labels like \"Ok,\" especially in the case of an error; errors are never \"Ok.\""),
React.createElement("li", null, "Don\u2019t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the \"safe act\" and retains the content (i.e. \"Save\") or cancels the action (i.e. \"Cancel\")."),
React.createElement("li", null, "Don\u2019t use a button to navigate to another place, use a link instead. The exception is in a wizard where \"Back\" and \"Next\" buttons may be used."),
React.createElement("li", null, "Don\u2019t put too much text in a button - try to keep the length of your text to a minimum."),
React.createElement("li", null, "Don't put anything other than text in a button."))), isHeaderVisible: this.props.isHeaderVisible }));
};
ButtonPage.prototype._onDisabledChanged = function (ev, disabled) {
this.setState({
areButtonsDisabled: disabled
});
};
return ButtonPage;
}(React.Component));
exports.ButtonPage = ButtonPage;
//# sourceMappingURL=ButtonPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'commandButton').
then(function () {
phantomcss.screenshot('#CommandButton', 'CommandButton_not_pressed');
}).then(function () {
this.mouse.move('#CommandButton');
phantomcss.screenshot('#CommandButton', 'CommandButton_hovered');
}).then(function () {
this.mouse.down('#CommandButton');
phantomcss.screenshot('#CommandButton', 'CommandButton_pressed');
}).then(function () {
phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_not_pressed');
}).then(function () {
this.mouse.move('#CommandButtonDisabled');
phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_hovered');
}).then(function () {
this.mouse.down('#CommandButtonDisabled');
phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=CommandButton.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var CommandButtonVPage = (function (_super) {
__extends(CommandButtonVPage, _super);
function CommandButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CommandButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.CommandButton, { id: 'CommandButton', icon: 'AddFriend', text: 'Command Button' })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.CommandButton, { id: 'CommandButtonDisabled', icon: 'AddFriend', disabled: true, text: 'Command Button' })));
};
return CommandButtonVPage;
}(React.Component));
exports.default = CommandButtonVPage;
//# sourceMappingURL=CommandButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'compoundButton').
then(function () {
phantomcss.screenshot('#CompoundButton', 'CompoundButton_not_pressed');
}).then(function () {
this.mouse.move('#CompoundButton');
phantomcss.screenshot('#CompoundButton', 'CompoundButton_hovered');
}).then(function () {
this.mouse.down('#CompoundButton');
phantomcss.screenshot('#CompoundButton', 'CompoundButton_pressed');
}).
then(function () {
phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_not_pressed');
}).then(function () {
this.mouse.move('#CompoundButtonDisabled');
phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_hovered');
}).then(function () {
this.mouse.down('#CompoundButtonDisabled');
phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=CompoundButton.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var CompoundButtonVPage = (function (_super) {
__extends(CompoundButtonVPage, _super);
function CompoundButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CompoundButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.CompoundButton, { id: 'CompoundButton', description: 'You can create a new account here.', text: 'Compound Button' })),
React.createElement("div", null,
React.createElement(index_1.CompoundButton, { id: 'CompoundButtonDisabled', disabled: true, description: 'You can create a new account here.', text: 'Compound Button' })));
};
return CompoundButtonVPage;
}(React.Component));
exports.default = CompoundButtonVPage;
//# sourceMappingURL=CompoundButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'contextualButton').
then(function () {
phantomcss.screenshot('#ContextualButton', 'ContextualButton_not_pressed');
}).then(function () {
this.mouse.move('#ContextualButton');
phantomcss.screenshot('#ContextualButton', 'ContextualButton_hovered');
}).then(function () {
this.mouse.down('#ContextualButton');
casper.wait(2000);
phantomcss.screenshot('#ContextualButton', 'ContextualButton_pressed');
phantomcss.screenshot('.ContextualButtonMenu', 'ContextualButtonMenu_pressed');
}).
then(function () {
phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_not_pressed');
}).then(function () {
this.mouse.move('#ContextualButtonDisabled');
phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_hovered');
}).then(function () {
this.mouse.down('#ContextualButtonDisabled');
phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=ContextualButton.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var CommandButtonVPage = (function (_super) {
__extends(CommandButtonVPage, _super);
function CommandButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CommandButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.DefaultButton, { id: 'ContextualButton', disabled: false, icon: 'Add', text: 'New', menuProps: {
className: 'ContextualButtonMenu',
id: 'ContextualButtonMenu',
items: [
{
key: 'emailMessage',
name: 'Email message',
icon: 'Mail'
},
{
key: 'calendarEvent',
name: 'Calendar event',
icon: 'Calendar'
}
]
} })),
React.createElement("div", null,
React.createElement(index_1.DefaultButton, { id: 'ContextualButtonDisabled', icon: 'Add', text: 'New', disabled: true })));
};
return CommandButtonVPage;
}(React.Component));
exports.default = CommandButtonVPage;
//# sourceMappingURL=ContextualButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'defaultButton').
then(function () {
phantomcss.screenshot('#DefaultButton', 'DefaultButton_not_pressed');
}).then(function () {
this.mouse.move('#DefaultButton');
phantomcss.screenshot('#DefaultButton', 'DefaultButton_hovered');
}).then(function () {
this.mouse.down('#DefaultButton');
phantomcss.screenshot('#DefaultButton', 'DefaultButton_pressed');
}).
then(function () {
phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_not_pressed');
}).then(function () {
this.mouse.move('#DefaultButtonDisabled');
phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_hovered');
}).then(function () {
this.mouse.down('#DefaultButtonDisabled');
phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_pressed');
}).then(function () {
phantomcss.screenshot('#IconButton', 'Icon_Button');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=DefaultButton.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var DefaultButtonVPage = (function (_super) {
__extends(DefaultButtonVPage, _super);
function DefaultButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DefaultButtonVPage.prototype.render = function () {
var iconName = 'Snow';
return React.createElement("div", null,
React.createElement("div", null,
React.createElement("label", null, " Default Button: "),
React.createElement(index_1.DefaultButton, { id: 'DefaultButton', icon: 'Add', text: 'Default Button' })),
React.createElement("div", null,
React.createElement("label", null, " Default Button Disabled: "),
React.createElement(index_1.DefaultButton, { id: 'DefaultButtonDisabled', disabled: true, icon: 'Add', text: 'Default Button' })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.IconButton, { id: 'IconButton', iconProps: { iconName: iconName } })));
};
return DefaultButtonVPage;
}(React.Component));
exports.default = DefaultButtonVPage;
//# sourceMappingURL=DefaultButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'primaryButton').
then(function () {
phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_not_pressed');
}).then(function () {
this.mouse.move('#PrimaryButton');
phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_hovered');
}).then(function () {
this.mouse.down('#PrimaryButton');
phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_pressed');
}).then(function () {
phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_not_pressed');
}).then(function () {
this.mouse.move('#PrimaryButtonDisabled');
phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_hovered');
}).then(function () {
this.mouse.down('#PrimaryButtonDisabled');
phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=PrimaryButton.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var PrimaryButtonVPage = (function (_super) {
__extends(PrimaryButtonVPage, _super);
function PrimaryButtonVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PrimaryButtonVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.PrimaryButton, { id: 'PrimaryButton', icon: 'Add', text: 'Primary Button' })),
React.createElement("div", null,
React.createElement(index_1.PrimaryButton, { id: 'PrimaryButtonDisabled', disabled: true, icon: 'Add', text: 'Primary Button' })));
};
return PrimaryButtonVPage;
}(React.Component));
exports.default = PrimaryButtonVPage;
//# sourceMappingURL=PrimaryButtonPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 1 14 14 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./BaseButton")); __export(require("./Button.Props")); __export(require("./Button")); __export(require("./CommandButton/CommandButton")); __export(require("./CompoundButton/CompoundButton")); __export(require("./DefaultButton/DefaultButton")); __export(require("./PrimaryButton/PrimaryButton")); __export(require("./IconButton/IconButton")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Calendar.Props.js | 100% | (4 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (4 / 4) | |
| Calendar.js | 10.75% | (10 / 93) | 10.45% | (7 / 67) | 5.26% | (1 / 19) | 11.49% | (10 / 87) | |
| Calendar.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| CalendarDay.js | 7.76% | (9 / 116) | 8.24% | (7 / 85) | 4.55% | (1 / 22) | 8.18% | (9 / 110) | |
| CalendarMonth.js | 17.02% | (8 / 47) | 26.67% | (4 / 15) | 7.14% | (1 / 14) | 18.18% | (8 / 44) | |
| CalendarPage.js | 29.63% | (8 / 27) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 33.33% | (8 / 24) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 | 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DateValues_1 = require("../../utilities/dateValues/DateValues");
exports.DayOfWeek = DateValues_1.DayOfWeek;
exports.DateRangeType = DateValues_1.DateRangeType;
//# sourceMappingURL=Calendar.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | 12 12 12 1 12 12 12 12 12 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var DateValues_1 = require("../../utilities/dateValues/DateValues");
var CalendarDay_1 = require("./CalendarDay");
var CalendarMonth_1 = require("./CalendarMonth");
var Utilities_1 = require("../../Utilities");
var styles = require("./Calendar.scss");
var Calendar = (function (_super) {
__extends(Calendar, _super);
function Calendar(props) {
var _this = _super.call(this) || this;
var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : new Date();
_this.state = {
selectedDate: currentDate,
navigatedDate: currentDate
};
_this._focusOnUpdate = false;
return _this;
}
Calendar.prototype.componentWillReceiveProps = function (nextProps) {
var value = nextProps.value;
this.setState({
selectedDate: value || new Date()
});
};
Calendar.prototype.componentDidUpdate = function () {
if (this._focusOnUpdate) {
this.refs.dayPicker.focus();
this._focusOnUpdate = false;
}
};
Calendar.prototype.render = function () {
var rootClass = 'ms-DatePicker';
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType, strings = _a.strings, isMonthPickerVisible = _a.isMonthPickerVisible, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday;
var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate;
return (React.createElement("div", { className: Utilities_1.css(rootClass, styles.root), ref: 'root' },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, isMonthPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible)) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-holder', styles.holder), onKeyDown: this._onDatePickerPopupKeyDown },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-frame', styles.frame) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-wrap', styles.wrap) },
React.createElement(CalendarDay_1.CalendarDay, { selectedDate: selectedDate, navigatedDate: navigatedDate, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, onDismiss: this.props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, autoNavigateOnSelection: autoNavigateOnSelection, strings: strings, ref: 'dayPicker' }),
isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate }),
showGoToToday && React.createElement("span", { className: Utilities_1.css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday)))))));
};
Calendar.prototype.focus = function () {
if (this.refs.dayPicker) {
this.refs.dayPicker.focus();
}
};
Calendar.prototype._navigateDay = function (date) {
this.setState({
navigatedDate: date
});
};
Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
this._navigateDay(date);
this._focusOnUpdate = focusOnNavigatedDay;
};
Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
var onSelectDate = this.props.onSelectDate;
this.setState({
selectedDate: date
});
if (onSelectDate) {
onSelectDate(date, selectedDateRangeArray);
}
};
;
Calendar.prototype._onGotoToday = function () {
this._navigateDay(new Date());
this._focusOnUpdate = true;
};
;
Calendar.prototype._onGotoTodayKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.enter) {
ev.preventDefault();
this._onGotoToday();
}
else if (ev.which === Utilities_1.KeyCodes.tab && !ev.shiftKey) {
if (this.props.onDismiss) {
ev.stopPropagation();
ev.preventDefault();
this.props.onDismiss();
}
}
};
;
Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
ev.preventDefault();
break;
case Utilities_1.KeyCodes.backspace:
ev.preventDefault();
break;
case Utilities_1.KeyCodes.escape:
this._handleEscKey(ev);
break;
default:
break;
}
};
Calendar.prototype._handleEscKey = function (ev) {
if (this.props.onDismiss() != null) {
this.props.onDismiss();
}
};
return Calendar;
}(Utilities_1.BaseComponent));
Calendar.defaultProps = {
onSelectDate: null,
onDismiss: null,
isMonthPickerVisible: true,
value: null,
firstDayOfWeek: DateValues_1.DayOfWeek.Sunday,
dateRangeType: DateValues_1.DateRangeType.Day,
autoNavigateOnSelection: false,
showGoToToday: true,
strings: null
};
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_navigateDay", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onNavigateDate", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onSelectDate", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onGotoToday", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onGotoTodayKeyDown", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
__decorate([
Utilities_1.autobind
], Calendar.prototype, "_handleEscKey", null);
exports.Calendar = Calendar;
//# sourceMappingURL=Calendar.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_99842107',
picker: 'picker_99842107',
holder: 'holder_99842107',
pickerIsOpened: 'pickerIsOpened_99842107',
fadeIn: 'fadeIn_99842107',
slideDownIn10: 'slideDownIn10_99842107',
frame: 'frame_99842107',
wrap: 'wrap_99842107',
dayPicker: 'dayPicker_99842107',
header: 'header_99842107',
month: 'month_99842107',
year: 'year_99842107',
table: 'table_99842107',
day: 'day_99842107',
weekday: 'weekday_99842107',
dayIsToday: 'dayIsToday_99842107',
dayIsDisabled: 'dayIsDisabled_99842107',
dayIsUnfocused: 'dayIsUnfocused_99842107',
dayIsFocused: 'dayIsFocused_99842107',
dayIsHighlighted: 'dayIsHighlighted_99842107',
pickerIsFocused: 'pickerIsFocused_99842107',
dayDisabled: 'dayDisabled_99842107',
monthPicker: 'monthPicker_99842107',
yearPicker: 'yearPicker_99842107',
monthComponents: 'monthComponents_99842107',
yearComponents: 'yearComponents_99842107',
decadeComponents: 'decadeComponents_99842107',
prevMonth: 'prevMonth_99842107',
nextMonth: 'nextMonth_99842107',
prevYear: 'prevYear_99842107',
nextYear: 'nextYear_99842107',
prevDecade: 'prevDecade_99842107',
nextDecade: 'nextDecade_99842107',
headerToggleView: 'headerToggleView_99842107',
currentYear: 'currentYear_99842107',
currentDecade: 'currentDecade_99842107',
optionGrid: 'optionGrid_99842107',
monthOption: 'monthOption_99842107',
yearOption: 'yearOption_99842107',
isHighlighted: 'isHighlighted_99842107',
goToday: 'goToday_99842107',
isPickingYears: 'isPickingYears_99842107',
pickerIsMonthPickerVisible: 'pickerIsMonthPickerVisible_99842107',
toggleMonthView: 'toggleMonthView_99842107',
isPickingMonths: 'isPickingMonths_99842107',
navContainer: 'navContainer_99842107',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_99842107{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px}.picker_99842107{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-size:14px;position:relative}html[dir=ltr] .picker_99842107{text-align:left}html[dir=rtl] .picker_99842107{text-align:right}.holder_99842107{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:300px;display:none}.picker_99842107.pickerIsOpened_99842107 .holder_99842107{-webkit-animation-name:fadeIn_99842107,slideDownIn10_99842107;animation-name:fadeIn_99842107,slideDownIn10_99842107;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;display:block}.pickerIsOpened_99842107{position:relative}.frame_99842107{padding:1px;position:relative}.wrap_99842107{margin:-1px;padding:9px}.dayPicker_99842107{display:block;margin-bottom:30px}.header_99842107{height:40px;line-height:44px}.month_99842107,.year_99842107{display:inline-block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-top:-1px}.month_99842107:hover,.year_99842107:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}html[dir=ltr] .month_99842107{margin-left:15px}html[dir=rtl] .month_99842107{margin-right:15px}html[dir=ltr] .year_99842107{margin-left:15px}html[dir=rtl] .year_99842107{margin-right:15px}.table_99842107{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.table_99842107 td{margin:0;padding:0}.table_99842107 td:hover{outline:1px solid transparent}.day_99842107,.weekday_99842107{width:40px;height:40px;padding:0;line-height:40px;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.dayIsToday_99842107{position:relative;background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.dayIsDisabled_99842107:before{border-top-color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.dayIsUnfocused_99842107{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";font-weight:400}.dayIsFocused_99842107:hover,.dayIsUnfocused_99842107:hover{cursor:pointer;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.day_99842107.dayIsHighlighted_99842107.dayIsFocused_99842107::-moz-focus-inner{border:0}.day_99842107.dayIsHighlighted_99842107.dayIsFocused_99842107{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .day_99842107.dayIsHighlighted_99842107.dayIsFocused_99842107:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.dayIsHighlighted_99842107:hover,.pickerIsFocused_99842107 .dayIsHighlighted_99842107{cursor:pointer;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.dayIsHighlighted_99842107.dayDisabled_99842107,.dayIsHighlighted_99842107.dayDisabled_99842107:hover{background:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.monthPicker_99842107,.yearPicker_99842107{display:none}.monthComponents_99842107{position:absolute;top:9px}html[dir=ltr] .monthComponents_99842107{right:9px}html[dir=rtl] .monthComponents_99842107{left:9px}html[dir=ltr] .monthComponents_99842107{left:9px}html[dir=rtl] .monthComponents_99842107{right:9px}.decadeComponents_99842107,.yearComponents_99842107{position:absolute;top:-2px}html[dir=ltr] .decadeComponents_99842107,html[dir=ltr] .yearComponents_99842107{right:10px}html[dir=rtl] .decadeComponents_99842107,html[dir=rtl] .yearComponents_99842107{left:10px}.nextDecade_99842107,.nextMonth_99842107,.nextYear_99842107,.prevDecade_99842107,.prevMonth_99842107,.prevYear_99842107{width:40px;height:40px;display:block;text-align:center;line-height:40px;text-align:center;font-size:16px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";position:relative;top:2px}html[dir=ltr] .nextDecade_99842107,html[dir=ltr] .nextMonth_99842107,html[dir=ltr] .nextYear_99842107,html[dir=ltr] .prevDecade_99842107,html[dir=ltr] .prevMonth_99842107,html[dir=ltr] .prevYear_99842107{margin-left:10px}html[dir=rtl] .nextDecade_99842107,html[dir=rtl] .nextMonth_99842107,html[dir=rtl] .nextYear_99842107,html[dir=rtl] .prevDecade_99842107,html[dir=rtl] .prevMonth_99842107,html[dir=rtl] .prevYear_99842107{margin-right:10px}.nextDecade_99842107:hover,.nextMonth_99842107:hover,.nextYear_99842107:hover,.prevDecade_99842107:hover,.prevMonth_99842107:hover,.prevYear_99842107:hover{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";cursor:pointer;outline:1px solid transparent}.headerToggleView_99842107{height:40px;position:absolute;top:0;width:140px;cursor:pointer}html[dir=ltr] .headerToggleView_99842107{left:0}html[dir=rtl] .headerToggleView_99842107{right:0}.currentDecade_99842107,.currentYear_99842107{display:block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:40px;line-height:40px}html[dir=ltr] .currentDecade_99842107,html[dir=ltr] .currentYear_99842107{margin-left:15px}html[dir=rtl] .currentDecade_99842107,html[dir=rtl] .currentYear_99842107{margin-right:15px}.currentYear_99842107{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.currentYear_99842107:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}.optionGrid_99842107{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}html[dir=rtl] .optionGrid_99842107{margin:10px 5px 30px 0}.monthOption_99842107,.yearOption_99842107{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";width:60px;height:60px;line-height:60px;cursor:pointer;margin:0 10px 10px 0;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:13px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";text-align:center}html[dir=ltr] .monthOption_99842107,html[dir=ltr] .yearOption_99842107{float:left}html[dir=rtl] .monthOption_99842107,html[dir=rtl] .yearOption_99842107{float:right}html[dir=rtl] .monthOption_99842107,html[dir=rtl] .yearOption_99842107{margin:0 0 10px 10px}.monthOption_99842107:hover,.yearOption_99842107:hover{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";outline:1px solid transparent}.monthOption_99842107.isHighlighted_99842107,.yearOption_99842107.isHighlighted_99842107{background-color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.goToday_99842107{bottom:9px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";cursor:pointer;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:13px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:30px;line-height:30px;padding:0 10px;position:absolute!important}html[dir=ltr] .goToday_99842107{right:3px}html[dir=rtl] .goToday_99842107{left:3px}.goToday_99842107:hover{outline:1px solid transparent}.root_99842107.isPickingYears_99842107 .dayPicker_99842107,.root_99842107.isPickingYears_99842107 .monthComponents_99842107{display:none}.root_99842107.isPickingYears_99842107 .monthPicker_99842107{display:none}.root_99842107.isPickingYears_99842107 .yearPicker_99842107{display:block}@media (min-width:460px){.header_99842107{height:30px;line-height:30px}.day_99842107,.weekday_99842107{width:30px;height:30px;line-height:28px;font-weight:600;font-size:12px}.monthComponents_99842107{width:210px}.nextDecade_99842107,.nextMonth_99842107,.nextYear_99842107,.prevDecade_99842107,.prevMonth_99842107,.prevYear_99842107{font-size:12px;width:24px;height:24px;line-height:24px}.holder_99842107{min-width:240px}.month_99842107,.year_99842107{font-weight:300}.month_99842107,.year_99842107{font-size:17px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.month_99842107:hover,.year_99842107:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";cursor:default}.pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{margin:-10px 0;padding:10px 0}.pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{box-sizing:border-box;width:220px;min-height:230px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .dayPicker_99842107{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.pickerIsMonthPickerVisible_99842107 .holder_99842107{width:440px}.pickerIsMonthPickerVisible_99842107 .monthPicker_99842107{display:block}.pickerIsMonthPickerVisible_99842107 .monthPicker_99842107,.pickerIsMonthPickerVisible_99842107 .yearPicker_99842107{top:9px;position:absolute}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .monthPicker_99842107,html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .yearPicker_99842107{left:238px}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .monthPicker_99842107,html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .yearPicker_99842107{right:238px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .month_99842107{margin-left:12px}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .month_99842107{margin-right:12px}.pickerIsMonthPickerVisible_99842107 .optionGrid_99842107{width:200px;height:auto;margin:10px 0 0 0}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .optionGrid_99842107{margin:10px 0 0 0}.pickerIsMonthPickerVisible_99842107 .toggleMonthView_99842107{display:none}.pickerIsMonthPickerVisible_99842107 .currentDecade_99842107,.pickerIsMonthPickerVisible_99842107 .currentYear_99842107{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.pickerIsMonthPickerVisible_99842107 .monthOption_99842107,.pickerIsMonthPickerVisible_99842107 .yearOption_99842107{width:40px;height:40px;line-height:38px;font-size:12px;margin:0 10px 10px 0}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .monthOption_99842107,html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .yearOption_99842107{margin:0 0 10px 10px}.pickerIsMonthPickerVisible_99842107 .monthOption_99842107:hover,.pickerIsMonthPickerVisible_99842107 .yearOption_99842107:hover{outline:1px solid transparent}.pickerIsMonthPickerVisible_99842107 .goToday_99842107{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;top:199px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{right:3px}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{left:3px}html[dir=ltr] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{text-align:right}html[dir=rtl] .pickerIsMonthPickerVisible_99842107 .goToday_99842107{text-align:left}.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .dayPicker_99842107,.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .monthComponents_99842107{display:block}.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .monthPicker_99842107{display:none}.pickerIsMonthPickerVisible_99842107 .root_99842107.isPickingYears_99842107 .yearPicker_99842107{display:block}}@media (max-width:459px){.root_99842107.isPickingMonths_99842107 .dayPicker_99842107,.root_99842107.isPickingMonths_99842107 .monthComponents_99842107{display:none}.root_99842107.isPickingMonths_99842107 .monthPicker_99842107{display:block}}.wrap_99842107 div:focus::-moz-focus-inner,.wrap_99842107 span:focus::-moz-focus-inner{border:0}.wrap_99842107 div:focus,.wrap_99842107 span:focus{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .wrap_99842107 div:focus:focus:after,.ms-Fabric.is-focusVisible .wrap_99842107 span:focus:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.goToday_99842107{width:auto}.nextMonth_99842107,.nextYear_99842107,.prevMonth_99842107,.prevYear_99842107{display:inline-block}html[dir=ltr] .navContainer_99842107{float:right}html[dir=rtl] .navContainer_99842107{float:left}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Calendar.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | 14 14 14 1 14 14 14 14 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var styles = require("./Calendar.scss");
var DAYS_IN_WEEK = 7;
var CalendarDay = (function (_super) {
__extends(CalendarDay, _super);
function CalendarDay(props) {
var _this = _super.call(this, props) || this;
_this.state = {
activeDescendantId: Utilities_1.getId('DatePickerDay-active'),
weeks: _this._getWeeks(props.navigatedDate, props.selectedDate)
};
_this._onSelectNextMonth = _this._onSelectNextMonth.bind(_this);
_this._onSelectPrevMonth = _this._onSelectPrevMonth.bind(_this);
return _this;
}
CalendarDay.prototype.componentWillReceiveProps = function (nextProps) {
this.setState({
weeks: this._getWeeks(nextProps.navigatedDate, nextProps.selectedDate)
});
};
CalendarDay.prototype.render = function () {
var _this = this;
var _a = this.state, activeDescendantId = _a.activeDescendantId, weeks = _a.weeks;
var _b = this.props, firstDayOfWeek = _b.firstDayOfWeek, strings = _b.strings, navigatedDate = _b.navigatedDate, onSelectDate = _b.onSelectDate;
var dayPickerId = Utilities_1.getId('DatePickerDay-dayPicker');
var monthAndYearId = Utilities_1.getId('DatePickerDay-monthAndYear');
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-dayPicker', styles.dayPicker), id: dayPickerId },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
React.createElement("div", { "aria-live": 'polite', "aria-relevant": 'text', "aria-atomic": 'true', id: monthAndYearId },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-month', styles.month) }, strings.months[navigatedDate.getMonth()]),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-year', styles.year) }, navigatedDate.getFullYear()))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthComponents', styles.monthComponents) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', styles.navContainer) },
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth), onClick: this._onSelectPrevMonth, onKeyDown: this._onPrevMonthKeyDown, "aria-controls": dayPickerId, "aria-label": strings.nextMonthAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !Utilities_1.getRTL(), 'ms-Icon--ChevronRight': Utilities_1.getRTL() }) })),
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth), onClick: this._onSelectNextMonth, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextMonth), "aria-controls": dayPickerId, "aria-label": strings.nextMonthAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': Utilities_1.getRTL(), 'ms-Icon--ChevronRight': !Utilities_1.getRTL() }) }))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-headerToggleView js-showMonthPicker', styles.headerToggleView) })),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement("table", { className: Utilities_1.css('ms-DatePicker-table', styles.table), role: 'grid', "aria-readonly": 'true', "aria-multiselectable": 'false', "aria-labelledby": monthAndYearId, "aria-activedescendant": activeDescendantId },
React.createElement("thead", null,
React.createElement("tr", null, strings.shortDays.map(function (val, index) {
return React.createElement("th", { className: Utilities_1.css('ms-DatePicker-weekday', styles.weekday), scope: 'col', key: index, title: strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }, strings.shortDays[(index + firstDayOfWeek) % DAYS_IN_WEEK]);
}))),
React.createElement("tbody", null, weeks.map(function (week, weekIndex) {
return React.createElement("tr", { key: weekIndex }, week.map(function (day, dayIndex) {
return React.createElement("td", { role: 'presentation', key: day.key },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-day', styles.day, (_a = {},
_a['ms-DatePicker-day--infocus ' + styles.dayIsFocused] = day.isInMonth,
_a['ms-DatePicker-day--outfocus ' + styles.dayIsUnfocused] = !day.isInMonth,
_a['ms-DatePicker-day--today ' + styles.dayIsToday] = day.isToday,
_a['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted] = day.isSelected,
_a)), role: 'gridcell', onClick: day.onSelected, onKeyDown: function (ev) {
return _this._navigateMonthEdge(ev, day.originalDate, weekIndex, dayIndex);
}, "aria-selected": day.isSelected, "aria-label": day.originalDate.toLocaleDateString ? day.originalDate.toLocaleDateString() : day.originalDate.getDate(), id: DateMath_1.compareDates(navigatedDate, day.originalDate) ? activeDescendantId : null, "data-is-focusable": true, ref: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null, key: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null }, day.date));
var _a;
}));
}))))));
};
CalendarDay.prototype.focus = function () {
if (this.refs.navigatedDay) {
this.refs.navigatedDay.tabIndex = 0;
this.refs.navigatedDay.focus();
}
};
CalendarDay.prototype._navigateMonthEdge = function (ev, date, weekIndex, dayIndex) {
if (weekIndex === 0 && ev.which === Utilities_1.KeyCodes.up) {
this.props.onNavigateDate(DateMath_1.addWeeks(date, -1), true);
ev.preventDefault();
}
else if (weekIndex === (this.state.weeks.length - 1) && ev.which === Utilities_1.KeyCodes.down) {
this.props.onNavigateDate(DateMath_1.addWeeks(date, 1), true);
ev.preventDefault();
}
else if (dayIndex === 0 && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left)) {
this.props.onNavigateDate(DateMath_1.addDays(date, -1), true);
ev.preventDefault();
}
else if (dayIndex === (DAYS_IN_WEEK - 1) && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)) {
this.props.onNavigateDate(DateMath_1.addDays(date, 1), true);
ev.preventDefault();
}
};
CalendarDay.prototype._onKeyDown = function (callback, ev) {
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
callback();
}
};
CalendarDay.prototype._onSelectDate = function (selectedDate) {
var _a = this.props, onSelectDate = _a.onSelectDate, dateRangeType = _a.dateRangeType, firstDayOfWeek = _a.firstDayOfWeek, navigatedDate = _a.navigatedDate, autoNavigateOnSelection = _a.autoNavigateOnSelection;
var dateRange = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek);
if (onSelectDate != null) {
onSelectDate(selectedDate, dateRange);
}
// Navigate to next or previous month if needed
if (autoNavigateOnSelection && selectedDate.getMonth() !== navigatedDate.getMonth()) {
var compareResult = DateMath_1.compareDatePart(selectedDate, navigatedDate);
if (compareResult < 0) {
this._onSelectPrevMonth();
}
else if (compareResult > 0) {
this._onSelectNextMonth();
}
}
};
CalendarDay.prototype._onSelectNextMonth = function () {
this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, 1), false);
};
CalendarDay.prototype._onSelectPrevMonth = function () {
this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, -1), false);
};
CalendarDay.prototype._onPrevMonthKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.tab && ev.shiftKey) {
if (this.props.onDismiss) {
ev.preventDefault();
ev.stopPropagation();
this.props.onDismiss();
}
}
else {
this._onKeyDown(this._onSelectPrevMonth, ev);
}
};
CalendarDay.prototype._getWeeks = function (navigatedDate, selectedDate) {
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType;
var date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
var today = new Date();
var weeks = [];
var week;
// Cycle the date backwards to get to the first day of the week.
while (date.getDay() !== firstDayOfWeek) {
date.setDate(date.getDate() - 1);
}
// a flag to indicate whether all days of the week are in the month
var isAllDaysOfWeekOutOfMonth = false;
var selectedDates = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek);
for (var weekIndex = 0; !isAllDaysOfWeekOutOfMonth; weekIndex++) {
week = [];
isAllDaysOfWeekOutOfMonth = true;
for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
var originalDate = new Date(date.toString());
var dayInfo = {
key: date.toString(),
date: date.getDate(),
originalDate: originalDate,
isInMonth: date.getMonth() === navigatedDate.getMonth(),
isToday: DateMath_1.compareDates(today, date),
isSelected: DateMath_1.isInDateRangeArray(date, selectedDates),
onSelected: this._onSelectDate.bind(this, originalDate)
};
week.push(dayInfo);
if (dayInfo.isInMonth) {
isAllDaysOfWeekOutOfMonth = false;
}
date.setDate(date.getDate() + 1);
}
if (!isAllDaysOfWeekOutOfMonth) {
weeks.push(week);
}
}
return weeks;
};
return CalendarDay;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], CalendarDay.prototype, "_onPrevMonthKeyDown", null);
exports.CalendarDay = CalendarDay;
//# sourceMappingURL=CalendarDay.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var styles = require("./Calendar.scss");
var CalendarMonth = (function (_super) {
__extends(CalendarMonth, _super);
function CalendarMonth(props) {
var _this = _super.call(this, props) || this;
_this._selectMonthCallbacks = [];
props.strings.shortMonths.map(function (month, index) {
_this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index);
});
_this._onSelectNextYear = _this._onSelectNextYear.bind(_this);
_this._onSelectPrevYear = _this._onSelectPrevYear.bind(_this);
_this._onSelectMonth = _this._onSelectMonth.bind(_this);
return _this;
}
CalendarMonth.prototype.render = function () {
var _this = this;
var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings;
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', styles.yearComponents, styles.navContainer) },
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), "aria-label": strings.prevYearAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !Utilities_1.getRTL(), 'ms-Icon--ChevronRight': Utilities_1.getRTL() }) })),
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), "aria-label": strings.nextYearAriaLabel, role: 'button', tabIndex: 0 },
React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': Utilities_1.getRTL(), 'ms-Icon--ChevronRight': !Utilities_1.getRTL() }) }))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, navigatedDate.getFullYear())),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid) }, strings.shortMonths.map(function (month, index) {
return (React.createElement("span", { className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": DateMath_1.setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }), "data-is-focusable": true }, month));
})))));
};
CalendarMonth.prototype._onKeyDown = function (callback, ev) {
if (ev.which === Utilities_1.KeyCodes.enter) {
callback();
}
};
CalendarMonth.prototype._onSelectNextYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false);
};
;
CalendarMonth.prototype._onSelectPrevYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
};
;
CalendarMonth.prototype._onSelectMonth = function (newMonth) {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
};
return CalendarMonth;
}(Utilities_1.BaseComponent));
exports.CalendarMonth = CalendarMonth;
//# sourceMappingURL=CalendarMonth.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Calendar_1 = require("office-ui-fabric-react/lib/Calendar");
var Calendar_Button_Example_1 = require("./examples/Calendar.Button.Example");
var Calendar_Inline_Example_1 = require("./examples/Calendar.Inline.Example");
var CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx');
var CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx');
var CalendarPage = (function (_super) {
__extends(CalendarPage, _super);
function CalendarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CalendarPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Calendar', componentName: 'CalendarExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: false })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month picker', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: true, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with week selection', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: true, dateRangeType: Calendar_1.DateRangeType.Week, autoNavigateOnSelection: true, showGoToToday: true })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month selection', code: CalendarInlineExampleCode },
React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: true, dateRangeType: Calendar_1.DateRangeType.Month, autoNavigateOnSelection: true, showGoToToday: true })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Calendar launched from a button', code: CalendarButtonExampleCode },
React.createElement(Calendar_Button_Example_1.CalendarButtonExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The calendar component allows a user to browse through a calendar and pick a date value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the control as a single entity."),
React.createElement("li", null, "Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference)."),
React.createElement("li", null, "The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate."),
React.createElement("li", null, "When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px \u2013 wide). Plan your UI implementation accordingly."),
React.createElement("li", null, "The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar."),
React.createElement("li", null, "Don't attempt to force resize the control in any way."),
React.createElement("li", null, "Don't force the control to render one mode vs. the other (year or month/day)"),
React.createElement("li", null, "The flyout selector is a light dismiss control. Don't modify this behavior in any way."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return CalendarPage;
}(React.Component));
exports.CalendarPage = CalendarPage;
//# sourceMappingURL=CalendarPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 10 10 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Calendar")); __export(require("./Calendar.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Callout.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Callout.js | 28.13% | (9 / 32) | 33.33% | (7 / 21) | 11.11% | (1 / 9) | 32.14% | (9 / 28) | |
| Callout.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| CalloutContent.js | 6.37% | (10 / 157) | 4.9% | (7 / 143) | 4.17% | (1 / 24) | 6.62% | (10 / 151) | |
| CalloutPage.js | 23.08% | (9 / 39) | 35% | (7 / 20) | 11.11% | (1 / 9) | 25.71% | (9 / 35) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Callout.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 12 12 12 1 12 12 12 12 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var CalloutContent_1 = require("./CalloutContent");
var Layer_1 = require("../../Layer");
var Callout = (function (_super) {
__extends(Callout, _super);
function Callout(props) {
return _super.call(this, props) || this;
}
Callout.prototype.render = function () {
var content = (React.createElement(CalloutContent_1.CalloutContent, __assign({}, this.props)));
return this.props.doNotLayer ? content : (React.createElement(Layer_1.Layer, null, content));
};
return Callout;
}(Utilities_1.BaseComponent));
exports.Callout = Callout;
//# sourceMappingURL=Callout.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_669777ac',
container: 'container_669777ac',
main: 'main_669777ac',
beak: 'beak_669777ac',
beakCurtain: 'beakCurtain_669777ac',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_669777ac{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 15px -5px rgba(0,0,0,.4);position:absolute;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}@media screen and (-ms-high-contrast:active){.root_669777ac{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_669777ac{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.container_669777ac{position:relative}.main_669777ac{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";overflow-x:hidden;overflow-y:auto;position:relative}.beak_669777ac{position:absolute;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:inherit;border:inherit;box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.beakCurtain_669777ac{position:absolute;top:0;right:0;bottom:0;left:0;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Callout.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 | 2 2 2 1 2 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var Utilities_1 = require("../../Utilities");
var positioning_1 = require("../../utilities/positioning");
var Popup_1 = require("../../Popup");
var styles = require("./Callout.scss");
var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
var OFF_SCREEN_STYLE = { opacity: 0 };
var BORDER_WIDTH = 1;
var SPACE_FROM_EDGE = 8;
var CalloutContent = (function (_super) {
__extends(CalloutContent, _super);
function CalloutContent(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ 'beakStyle': 'beakWidth' });
_this._didSetInitialFocus = false;
_this.state = {
positions: null,
slideDirectionalClassName: null,
calloutElementRect: null
};
_this._positionAttempts = 0;
return _this;
}
CalloutContent.prototype.componentDidUpdate = function () {
this._setInitialFocus();
this._updatePosition();
};
CalloutContent.prototype.componentWillMount = function () {
var target = this.props.targetElement ? this.props.targetElement : this.props.target;
this._setTargetWindowAndElement(target);
};
CalloutContent.prototype.componentWillUpdate = function (newProps) {
if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) {
var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target;
this._maxHeight = undefined;
this._setTargetWindowAndElement(newTarget);
}
if (newProps.gapSpace !== this.props.gapSpace || this.props.beakWidth !== newProps.beakWidth) {
this._maxHeight = undefined;
}
};
CalloutContent.prototype.componentDidMount = function () {
this._onComponentDidMount();
};
CalloutContent.prototype.render = function () {
// If there is no target window then we are likely in server side rendering and we should not render anything.
if (!this._targetWindow) {
return null;
}
var _a = this.props, className = _a.className, target = _a.target, targetElement = _a.targetElement, isBeakVisible = _a.isBeakVisible, beakStyle = _a.beakStyle, children = _a.children, beakWidth = _a.beakWidth;
var positions = this.state.positions;
var beakStyleWidth = beakWidth;
// This is here to support the old way of setting the beak size until version 1.0.0.
// beakStyle is now deprecated and will be be removed at version 1.0.0
if (beakStyle === 'ms-Callout-smallbeak') {
beakStyleWidth = 16;
}
var beakReactStyle = {
top: positions && positions.beakPosition ? positions.beakPosition.top : BEAK_ORIGIN_POSITION.top,
left: positions && positions.beakPosition ? positions.beakPosition.left : BEAK_ORIGIN_POSITION.left,
height: beakStyleWidth,
width: beakStyleWidth
};
var directionalClassName = positions && positions.directionalClassName ? "ms-u-" + positions.directionalClassName : '';
var contentMaxHeight = this._getMaxHeight();
var beakVisible = isBeakVisible && (!!targetElement || !!target);
var content = (React.createElement("div", { ref: this._resolveRef('_hostElement'), className: Utilities_1.css('ms-Callout-container', styles.container) },
React.createElement("div", { className: Utilities_1.css('ms-Callout', styles.root, className, directionalClassName), style: positions ? positions.calloutPosition : OFF_SCREEN_STYLE, ref: this._resolveRef('_calloutElement') },
beakVisible && (React.createElement("div", { className: Utilities_1.css('ms-Callout-beak', styles.beak), style: beakReactStyle })),
beakVisible &&
(React.createElement("div", { className: Utilities_1.css('ms-Callout-beakCurtain', styles.beakCurtain) })),
React.createElement(Popup_1.Popup, { className: Utilities_1.css('ms-Callout-main', styles.main), onDismiss: this.dismiss, shouldRestoreFocus: true, style: { maxHeight: contentMaxHeight } }, children))));
return content;
};
CalloutContent.prototype.dismiss = function (ev) {
var onDismiss = this.props.onDismiss;
if (onDismiss) {
onDismiss(ev);
}
};
CalloutContent.prototype._dismissOnScroll = function (ev) {
var preventDismissOnScroll = this.props.preventDismissOnScroll;
if (this.state.positions && !preventDismissOnScroll) {
this._dismissOnLostFocus(ev);
}
};
CalloutContent.prototype._dismissOnLostFocus = function (ev) {
var target = ev.target;
var clickedOutsideCallout = this._hostElement && !Utilities_1.elementContains(this._hostElement, target);
if ((!this._target && clickedOutsideCallout) ||
ev.target !== this._targetWindow &&
clickedOutsideCallout &&
(this._target.stopPropagation ||
(!this._target || (target !== this._target && !Utilities_1.elementContains(this._target, target))))) {
this.dismiss(ev);
}
};
CalloutContent.prototype._setInitialFocus = function () {
if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
this._didSetInitialFocus = true;
Utilities_1.focusFirstChild(this._calloutElement);
}
};
CalloutContent.prototype._onComponentDidMount = function () {
var _this = this;
// This is added so the callout will dismiss when the window is scrolled
// but not when something inside the callout is scrolled. The delay seems
// to be required to avoid React firing an async focus event in IE from
// the target changing focus quickly prior to rendering the callout.
this._async.setTimeout(function () {
_this._events.on(_this._targetWindow, 'scroll', _this._dismissOnScroll, true);
_this._events.on(_this._targetWindow, 'resize', _this.dismiss, true);
_this._events.on(_this._targetWindow, 'focus', _this._dismissOnLostFocus, true);
_this._events.on(_this._targetWindow, 'click', _this._dismissOnLostFocus, true);
}, 0);
if (this.props.onLayerMounted) {
this.props.onLayerMounted();
}
this._updatePosition();
};
CalloutContent.prototype._updatePosition = function () {
var positions = this.state.positions;
var hostElement = this._hostElement;
var calloutElement = this._calloutElement;
if (hostElement && calloutElement) {
var currentProps = void 0;
currentProps = Utilities_1.assign(currentProps, this.props);
currentProps.bounds = this._getBounds();
// Temporary to be removed when targetElement is removed. Currently deprecated.
if (this.props.targetElement) {
currentProps.targetElement = this._target;
}
else {
currentProps.target = this._target;
}
var newPositions = positioning_1.getRelativePositions(currentProps, hostElement, calloutElement);
// Set the new position only when the positions are not exists or one of the new callout positions are different.
// The position should not change if the position is within 2 decimal places.
if ((!positions && newPositions) ||
(positions && newPositions && !this._arePositionsEqual(positions, newPositions)
&& this._positionAttempts < 5)) {
// We should not reposition the callout more than a few times, if it is then the content is likely resizing
// and we should stop trying to reposition to prevent a stack overflow.
this._positionAttempts++;
this.setState({
positions: newPositions
});
}
else {
this._positionAttempts = 0;
if (this.props.onPositioned) {
this.props.onPositioned();
}
}
}
};
CalloutContent.prototype._getBounds = function () {
if (!this._bounds) {
var currentBounds = this.props.bounds;
if (!currentBounds) {
currentBounds = {
top: 0 + SPACE_FROM_EDGE,
left: 0 + SPACE_FROM_EDGE,
right: this._targetWindow.innerWidth - SPACE_FROM_EDGE,
bottom: this._targetWindow.innerHeight - SPACE_FROM_EDGE,
width: this._targetWindow.innerWidth - SPACE_FROM_EDGE * 2,
height: this._targetWindow.innerHeight - SPACE_FROM_EDGE * 2
};
}
this._bounds = currentBounds;
}
return this._bounds;
};
CalloutContent.prototype._getMaxHeight = function () {
if (!this._maxHeight) {
if (this.props.directionalHintFixed && this._target) {
var beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
var gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
this._maxHeight = positioning_1.getMaxHeight(this._target, this.props.directionalHint, beakWidth + gapSpace, this._getBounds());
}
else {
this._maxHeight = this._getBounds().height - BORDER_WIDTH * 2;
}
}
return this._maxHeight;
};
CalloutContent.prototype._arePositionsEqual = function (positions, newPosition) {
if (positions.calloutPosition.top.toFixed(2) !== newPosition.calloutPosition.top.toFixed(2)) {
return false;
}
if (positions.calloutPosition.left.toFixed(2) !== newPosition.calloutPosition.left.toFixed(2)) {
return false;
}
if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) {
return false;
}
if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) {
return false;
}
return true;
};
CalloutContent.prototype._setTargetWindowAndElement = function (target) {
if (target) {
if (typeof target === 'string') {
var currentDoc = Utilities_1.getDocument();
this._target = currentDoc ? currentDoc.querySelector(target) : null;
this._targetWindow = Utilities_1.getWindow();
}
else if (target.stopPropagation) {
this._target = target;
this._targetWindow = Utilities_1.getWindow(target.toElement);
}
else {
var targetElement = target;
this._target = target;
this._targetWindow = Utilities_1.getWindow(targetElement);
}
}
else {
this._targetWindow = Utilities_1.getWindow();
}
};
return CalloutContent;
}(Utilities_1.BaseComponent));
CalloutContent.defaultProps = {
preventDismissOnScroll: false,
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge
};
__decorate([
Utilities_1.autobind
], CalloutContent.prototype, "dismiss", null);
__decorate([
Utilities_1.autobind
], CalloutContent.prototype, "_setInitialFocus", null);
__decorate([
Utilities_1.autobind
], CalloutContent.prototype, "_onComponentDidMount", null);
exports.CalloutContent = CalloutContent;
//# sourceMappingURL=CalloutContent.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var data_1 = require("../CommandBar/examples/data");
var Callout_Basic_Example_1 = require("./examples/Callout.Basic.Example");
var Callout_Nested_Example_1 = require("./examples/Callout.Nested.Example");
var Callout_Directional_Example_1 = require("./examples/Callout.Directional.Example");
var Callout_Cover_Example_1 = require("./examples/Callout.Cover.Example");
var CalloutBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx');
var CalloutNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx');
var CalloutDirectionalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx');
var CalloutCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx');
var CalloutPage = (function (_super) {
__extends(CalloutPage, _super);
function CalloutPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CalloutPage.prototype.render = function () {
var cmdBarParamsTextAndIcons = { items: data_1.textOnlyItems, farItems: null };
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Callout', componentName: 'CalloutExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple callout', code: CalloutBasicExampleCode },
React.createElement(Callout_Basic_Example_1.CalloutBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nested callout... Callout with a commandbar with a sub menu', code: CalloutNestedExampleCode },
React.createElement(Callout_Nested_Example_1.CalloutNestedExample, __assign({}, cmdBarParamsTextAndIcons))),
React.createElement(example_app_base_1.ExampleCard, { title: 'Callout directional example', code: CalloutDirectionalExampleCode },
React.createElement(Callout_Directional_Example_1.CalloutDirectionalExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Callout cover example', code: CalloutCoverExampleCode },
React.createElement(Callout_Cover_Example_1.CalloutCoverExample, null))), propertiesTables: React.createElement("div", null,
React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Callout/Callout.Props.ts')
] }),
React.createElement("p", null,
"Besides the above properties, the ",
React.createElement("code", null, "Callout"),
" component accepts all properties that the React ",
React.createElement("code", null, "button"),
" and ",
React.createElement("code", null, "a"),
" components accept.")), overview: React.createElement("div", null,
React.createElement("p", null, "Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way."),
React.createElement("p", null, "Use a Callout for displaying additional contextual information about an item on the screen. Unlike Tooltips, Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content."),
React.createElement("p", null, "Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the ms-Icon--info \"i\" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Callout/Callout.html' }, "Fabric JS"), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary."),
React.createElement("li", null, "Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best."),
React.createElement("li", null, "Do be helpful with the tip text inside of your Callout."),
React.createElement("li", null, "Do limit the information inside of a Callout to supplemental information that users don't have to read."),
React.createElement("li", null, "Callouts should be placed near the object being described, usually at the pointer's tail or head if possible."),
React.createElement("li", null, "When additional context - or more advanced description - is necessary, consider placing a link to \"Learn more\" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience."),
React.createElement("li", null, "Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming."),
React.createElement("li", null, "Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout."),
React.createElement("li", null, "Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout."),
React.createElement("li", null, "Don\u2019t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration."),
React.createElement("li", null, "Don\u2019t open Callout from within another Callout."),
React.createElement("li", null, "Don\u2019t use Callout to ask the user to confirm an action, use a Dialog instead."),
React.createElement("li", null, "Don\u2019t show Callouts on hidden elements."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return CalloutPage;
}(React.Component));
exports.CalloutPage = CalloutPage;
//# sourceMappingURL=CalloutPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 10 10 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Callout")); __export(require("../../common/DirectionalHint")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Check.js | 27.59% | (8 / 29) | 22.22% | (4 / 18) | 11.11% | (1 / 9) | 30.77% | (8 / 26) | |
| Check.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 6 6 6 1 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./Check.scss");
var Check = (function (_super) {
__extends(Check, _super);
function Check() {
return _super !== null && _super.apply(this, arguments) || this;
}
Check.prototype.shouldComponentUpdate = function (newProps) {
return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked;
};
Check.prototype.render = function () {
var _a = this.props, isChecked = _a.isChecked, checked = _a.checked;
isChecked = isChecked || checked;
return (React.createElement("div", { className: Utilities_1.css('ms-Check', styles.root, (_b = {},
_b['is-checked ' + styles.rootIsChecked] = isChecked,
_b)) },
React.createElement("div", { className: Utilities_1.css('ms-Icon ms-Check-background', styles.background) }),
React.createElement("i", { className: Utilities_1.css('ms-Check-check ms-Icon ms-Icon--CheckMark', styles.check) })));
var _b;
};
return Check;
}(Utilities_1.BaseComponent));
Check.defaultProps = {
isChecked: false
};
exports.Check = Check;
//# sourceMappingURL=Check.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_fad8abeb',
rootIsChecked: 'rootIsChecked_fad8abeb',
background: 'background_fad8abeb',
check: 'check_fad8abeb',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_fad8abeb{line-height:1;width:24px;height:24px;vertical-align:top;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_fad8abeb.rootIsChecked_fad8abeb .background_fad8abeb:before{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_fad8abeb.rootIsChecked_fad8abeb .background_fad8abeb:after{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_fad8abeb.rootIsChecked_fad8abeb .check_fad8abeb{opacity:1;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:900;font-size:12px}.root_fad8abeb:hover .check_fad8abeb{opacity:1}.check_fad8abeb{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";opacity:0}.background_fad8abeb{position:relative;height:24px;width:24px}.background_fad8abeb:before{content:'\\E91F';color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.background_fad8abeb:after{content:'\\EA3A';color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.background_fad8abeb:after,.background_fad8abeb:before{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:24px;height:24px;width:24px;position:absolute}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Check.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Check")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Checkbox.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Checkbox.js | 13.89% | (10 / 72) | 14.49% | (10 / 69) | 6.67% | (1 / 15) | 15.38% | (10 / 65) | |
| Checkbox.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| Checkbox.visualtest.js | 20% | (3 / 15) | 100% | (0 / 0) | 0% | (0 / 7) | 21.43% | (3 / 14) | |
| CheckboxPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| CheckboxPage.visualtest.js | 31.82% | (7 / 22) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.84% | (7 / 19) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Checkbox.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 8 8 8 1 8 8 8 8 8 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./Checkbox.scss");
var Checkbox = (function (_super) {
__extends(Checkbox, _super);
function Checkbox(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'checked': 'defaultChecked'
});
_this._id = Utilities_1.getId('checkbox-');
_this.state = {
isFocused: false,
isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
};
return _this;
}
Checkbox.prototype.render = function () {
var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, label = _a.label, name = _a.name;
var isFocused = this.state.isFocused;
var isChecked = checked === undefined ? this.state.isChecked : checked;
return (React.createElement("div", { className: Utilities_1.css('ms-Checkbox', styles.root, className, (_b = {
'is-inFocus': isFocused
},
_b[styles.rootIsInFocus] = isFocused,
_b)) },
React.createElement("input", __assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), id: this._id, name: name || this._id, className: Utilities_1.css('ms-Checkbox-input', styles.input), type: 'checkbox', onChange: this._onChange, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked })),
this.props.children,
React.createElement("label", { htmlFor: this._id, className: Utilities_1.css('ms-Checkbox-label', styles.label, (_c = {},
_c['is-checked ' + styles.labelIsChecked] = isChecked,
_c['is-disabled ' + styles.labelIsDisabled] = disabled,
_c[styles.labelIsInFocus] = isFocused,
_c)) }, label && React.createElement("span", { className: styles.textLabel }, label))));
var _b, _c;
};
Object.defineProperty(Checkbox.prototype, "checked", {
get: function () {
return this._checkBox ? this._checkBox.checked : false;
},
enumerable: true,
configurable: true
});
Checkbox.prototype.focus = function () {
if (this._checkBox) {
this._checkBox.focus();
}
};
Checkbox.prototype._onFocus = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onFocus) {
inputProps.onFocus(ev);
}
this.setState({ isFocused: true });
};
Checkbox.prototype._onBlur = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onBlur) {
inputProps.onBlur(ev);
}
this.setState({ isFocused: false });
};
Checkbox.prototype._onChange = function (ev) {
var onChange = this.props.onChange;
var isChecked = ev.target.checked;
if (onChange) {
onChange(ev, isChecked);
}
if (this.props.checked === undefined) {
this.setState({ isChecked: isChecked });
}
};
return Checkbox;
}(Utilities_1.BaseComponent));
Checkbox.defaultProps = {};
__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onFocus", null);
__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onBlur", null);
__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onChange", null);
exports.Checkbox = Checkbox;
//# sourceMappingURL=Checkbox.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_fb7add54',
textLabel: 'textLabel_fb7add54',
input: 'input_fb7add54',
label: 'label_fb7add54',
labelIsDisabled: 'labelIsDisabled_fb7add54',
labelIsChecked: 'labelIsChecked_fb7add54',
labelIsInFocus: 'labelIsInFocus_fb7add54',
rootIsInFocus: 'rootIsInFocus_fb7add54',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_fb7add54{box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.textLabel_fb7add54{font-size:14px;padding:0 0 0 26px;display:inline-block;font-size:14px}html[dir=rtl] .textLabel_fb7add54{padding:0 26px 0 0}.input_fb7add54{position:absolute;opacity:0;top:8px}.label_fb7add54::before{content:'';display:inline-block;border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.label_fb7add54::after{content:\"\\E73E\";font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";line-height:20px;width:20px;text-align:center}.label_fb7add54{display:inline-block;cursor:pointer;margin-top:8px;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:20px;min-height:20px;line-height:20px}.label_fb7add54:hover::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54:hover .textLabel_fb7add54{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_fb7add54:focus::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54:focus.labelIsDisabled_fb7add54::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_fb7add54:focus.labelIsChecked_fb7add54::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_fb7add54:active::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54:active .textLabel_fb7add54{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_fb7add54.labelIsChecked_fb7add54::before{border:10px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_fb7add54.labelIsChecked_fb7add54::before{display:none}}.label_fb7add54.labelIsChecked_fb7add54::after{display:block}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_fb7add54.labelIsChecked_fb7add54::after{height:16px;width:16px;line-height:16px}}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsChecked_fb7add54::after{border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsChecked_fb7add54::after{border:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.label_fb7add54.labelIsChecked_fb7add54:focus::before,.label_fb7add54.labelIsChecked_fb7add54:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_fb7add54.labelIsDisabled_fb7add54{cursor:default}.label_fb7add54.labelIsDisabled_fb7add54:focus::before,.label_fb7add54.labelIsDisabled_fb7add54:hover::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_fb7add54.labelIsDisabled_fb7add54::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsDisabled_fb7add54::after{border:2px solid #0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsDisabled_fb7add54::after{border:2px solid #600000}}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsDisabled_fb7add54::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsDisabled_fb7add54::after{color:#600000}}.label_fb7add54.labelIsDisabled_fb7add54 .textLabel_fb7add54{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_fb7add54.labelIsDisabled_fb7add54 .textLabel_fb7add54{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_fb7add54.labelIsDisabled_fb7add54 .textLabel_fb7add54{color:#600000}}.label_fb7add54.labelIsInFocus_fb7add54::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_fb7add54.labelIsInFocus_fb7add54.labelIsDisabled_fb7add54::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_fb7add54.labelIsInFocus_fb7add54.labelIsChecked_fb7add54::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.ms-Fabric.is-focusVisible .rootIsInFocus_fb7add54::before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.ms-Fabric.is-focusVisible .rootIsInFocus_fb7add54::before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.ms-Fabric.is-focusVisible .rootIsInFocus_fb7add54::before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Checkbox.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'checkbox').
then(function () {
phantomcss.screenshot('.Checkbox', 'Checkbox_not_pressed');
}).then(function () {
this.mouse.move('.Checkbox');
phantomcss.screenshot('.Checkbox', 'Checkbox_hovered');
}).then(function () {
this.mouse.down('.Checkbox');
phantomcss.screenshot('.Checkbox', 'Checkbox_pressed');
}).
then(function () {
phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_not_pressed');
}).then(function () {
this.mouse.move('.CheckboxDisabled');
phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_hovered');
}).then(function () {
this.mouse.down('.CheckboxDisabled');
phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=Checkbox.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Checkbox_Basic_Example_1 = require("./examples/Checkbox.Basic.Example");
var CheckboxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx');
var CheckboxPage = (function (_super) {
__extends(CheckboxPage, _super);
function CheckboxPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CheckboxPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Checkbox', componentName: 'CheckboxExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Checkboxes', code: CheckboxBasicExampleCode },
React.createElement(Checkbox_Basic_Example_1.CheckboxBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control."),
React.createElement("p", null, "A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected."),
React.createElement("p", null, "Use a single Checkbox for a subordinate setting, such as with a \"Remember me?\" login scenario or with a terms of service agreement."),
React.createElement("p", null, "For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection."),
React.createElement("p", null, "Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Allow users to choose any combination of options when several Checkboxes are grouped together."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use a Checkbox as an on/off control. Instead use a toggle switch."),
React.createElement("li", null, "Don\u2019t use a Checkbox when the user can choose only one option from the group, use radio buttons instead."),
React.createElement("li", null, "Don't put two groups of Checkboxes next to each other. Separate the two groups with labels."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/CheckBox/CheckBox.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return CheckboxPage;
}(React.Component));
exports.CheckboxPage = CheckboxPage;
//# sourceMappingURL=CheckboxPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var CheckboxVPage = (function (_super) {
__extends(CheckboxVPage, _super);
function CheckboxVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CheckboxVPage.prototype.render = function () {
return React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.Checkbox, { className: 'Checkbox', label: 'Check Box', defaultChecked: true }),
React.createElement(index_1.Checkbox, { className: 'CheckboxDisabled', label: 'Check Box Disabled', defaultChecked: true, disabled: true }));
};
return CheckboxVPage;
}(React.Component));
exports.default = CheckboxVPage;
//# sourceMappingURL=CheckboxPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 6 6 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Checkbox")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ChoiceGroup.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| ChoiceGroup.js | 11.39% | (9 / 79) | 12.28% | (7 / 57) | 5.26% | (1 / 19) | 12% | (9 / 75) | |
| ChoiceGroup.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| ChoiceGroup.visualtest.js | 15% | (3 / 20) | 100% | (0 / 0) | 0% | (0 / 10) | 15.79% | (3 / 19) | |
| ChoiceGroupPage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| ChoiceGroupPage.visualtest.js | 31.82% | (7 / 22) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.84% | (7 / 19) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=ChoiceGroup.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | 8 8 8 1 8 8 8 8 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Image_1 = require("../../Image");
var Label_1 = require("../../Label");
var Icon_1 = require("../../Icon");
var Utilities_1 = require("../../Utilities");
var styles = require("./ChoiceGroup.scss");
var ChoiceGroup = (function (_super) {
__extends(ChoiceGroup, _super);
function ChoiceGroup(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ 'onChanged': 'onChange' });
_this._warnMutuallyExclusive({
selectedKey: 'defaultSelectedKey'
});
_this.state = {
keyChecked: (props.defaultSelectedKey === undefined) ?
_this._getKeyChecked(props) :
props.defaultSelectedKey,
keyFocused: undefined
};
_this._id = Utilities_1.getId('ChoiceGroup');
_this._labelId = Utilities_1.getId('ChoiceGroupLabel');
return _this;
}
ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
var newKeyChecked = this._getKeyChecked(newProps);
var oldKeyCheched = this._getKeyChecked(this.props);
if (newKeyChecked !== oldKeyCheched) {
this.setState({
keyChecked: newKeyChecked,
});
}
};
ChoiceGroup.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, options = _a.options, className = _a.className, required = _a.required;
var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
return (
// Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role
React.createElement("div", { role: 'application', className: className },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": this.props.label ? this._id + '-label' : '' },
this.props.label && (React.createElement(Label_1.Label, { className: className, required: required, id: this._id + '-label' }, label)),
options.map(function (option) {
return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', styles.choiceField, (_a = {},
_a['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc,
_a['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps,
_a['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused,
_a)) },
React.createElement("input", { ref: function (c) { return _this._inputElement = c; }, id: _this._id + "-" + option.key, className: Utilities_1.css('ms-ChoiceField-input', styles.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.isDisabled || option.disabled || _this.props.disabled, checked: option.key === keyChecked, required: required, onChange: _this._onChange.bind(_this, option), onFocus: _this._onFocus.bind(_this, option), onBlur: _this._onBlur.bind(_this, option), "aria-labelledby": _this._labelId + "-" + option.key }),
_this._renderField(option)));
var _a;
}))));
};
ChoiceGroup.prototype.focus = function () {
if (this._inputElement) {
this._inputElement.focus();
}
};
ChoiceGroup.prototype._onFocus = function (option, ev) {
this.setState({
keyFocused: option.key,
keyChecked: this.state.keyChecked
});
};
ChoiceGroup.prototype._onBlur = function (option, ev) {
this.setState({
keyFocused: undefined,
keyChecked: this.state.keyChecked
});
};
ChoiceGroup.prototype._renderField = function (option) {
var keyChecked = this.state.keyChecked;
var isDisabled = option.isDisabled || option.disabled || this.props.disabled;
return (React.createElement("label", { htmlFor: this._id + '-' + option.key, className: Utilities_1.css('ms-ChoiceField-field', styles.field, (_a = {},
_a['ms-ChoiceField-field--image ' + styles.fieldIsImage] = !!option.imageSrc,
_a['ms-ChoiceField--icon ' + styles.fieldIsIcon] = !!option.iconProps,
_a['is-checked ' + styles.fieldIsChecked] = option.key === keyChecked,
_a['is-disabled ' + styles.fieldIsDisabled] = isDisabled,
_a)) },
option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {},
_b['is-hidden ' + styles.imageWrapperIsHidden] = option.key === keyChecked,
_b)) },
React.createElement(Image_1.Image, { src: option.imageSrc, width: option.imageSize.width, height: option.imageSize.height })),
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {},
_c['is-hidden ' + styles.imageWrapperIsHidden] = option.key !== keyChecked,
_c)) },
React.createElement(Image_1.Image, { src: option.selectedImageSrc, width: option.imageSize.width, height: option.imageSize.height })))),
option.iconProps
? React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', styles.iconWrapper) },
React.createElement(Icon_1.Icon, __assign({}, option.iconProps))))
: null,
option.imageSrc || option.iconProps
? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', styles.labelWrapper) },
React.createElement("span", { id: this._labelId + "-" + option.key, className: 'ms-Label' }, option.text))) : (React.createElement("span", { id: this._labelId + "-" + option.key, className: 'ms-Label' }, option.text))));
var _a, _b, _c;
};
ChoiceGroup.prototype._onChange = function (option, evt) {
var _a = this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey;
// Only manage state in uncontrolled scenarios.
if (selectedKey === undefined) {
this.setState({
keyChecked: option.key
});
}
// TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
if (onChange) {
onChange(evt, option);
}
else if (onChanged) {
onChanged(option);
}
};
/**
* If all the isChecked property of options are falsy values, return undefined;
* Else return the key of the first option with the truthy isChecked property.
*/
ChoiceGroup.prototype._getKeyChecked = function (props) {
if (props.selectedKey !== undefined) {
return props.selectedKey;
}
var optionsChecked = props.options.filter(function (option) {
return option.isChecked || option.checked;
});
if (optionsChecked.length === 0) {
return undefined;
}
else {
return optionsChecked[0].key;
}
};
return ChoiceGroup;
}(Utilities_1.BaseComponent));
ChoiceGroup.defaultProps = {
options: []
};
exports.ChoiceGroup = ChoiceGroup;
//# sourceMappingURL=ChoiceGroup.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_c86c558d',
choiceField: 'choiceField_c86c558d',
input: 'input_c86c558d',
field: 'field_c86c558d',
fieldIsDisabled: 'fieldIsDisabled_c86c558d',
fieldIsChecked: 'fieldIsChecked_c86c558d',
choiceFieldIsInFocus: 'choiceFieldIsInFocus_c86c558d',
choiceFieldIsImage: 'choiceFieldIsImage_c86c558d',
choiceFieldIsIcon: 'choiceFieldIsIcon_c86c558d',
fieldIsImage: 'fieldIsImage_c86c558d',
fieldIsIcon: 'fieldIsIcon_c86c558d',
innerField: 'innerField_c86c558d',
imageWrapper: 'imageWrapper_c86c558d',
imageWrapperIsHidden: 'imageWrapperIsHidden_c86c558d',
labelWrapper: 'labelWrapper_c86c558d',
iconWrapper: 'iconWrapper_c86c558d',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_c86c558d{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.choiceField_c86c558d{box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;font-size:14px;font-weight:400;min-height:36px;border:none;position:relative}html[dir=ltr] .choiceField_c86c558d{padding-left:8px}html[dir=rtl] .choiceField_c86c558d{padding-right:8px}.choiceField_c86c558d .ms-Label{font-size:14px;padding:0 0 0 26px;display:inline-block}html[dir=rtl] .choiceField_c86c558d .ms-Label{padding:0 26px 0 0}.input_c86c558d{position:absolute;opacity:0;top:8px}.field_c86c558d::before{content:'';display:inline-block;border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.field_c86c558d::after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:10px;bottom:0;transition-property:top,left,right,width,height;transition-duration:150ms;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}html[dir=ltr] .field_c86c558d::after{left:10px}html[dir=rtl] .field_c86c558d::after{right:10px}html[dir=ltr] .field_c86c558d::after{right:0}html[dir=rtl] .field_c86c558d::after{left:0}@media screen and (-ms-high-contrast:active){.field_c86c558d::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d::after{color:#600000}}.field_c86c558d{display:inline-block;cursor:pointer;margin-top:8px;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.field_c86c558d:hover::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d:hover .ms-Label{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.field_c86c558d:focus::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d:focus.fieldIsDisabled_c86c558d::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_c86c558d:focus.fieldIsChecked_c86c558d::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.field_c86c558d:active::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d:active .ms-Label{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.field_c86c558d.fieldIsChecked_c86c558d::before{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background-color:transparent}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsChecked_c86c558d::before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsChecked_c86c558d::before{border-color:#37006e}}.field_c86c558d.fieldIsChecked_c86c558d::after{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";top:5px;width:10px;height:10px}html[dir=ltr] .field_c86c558d.fieldIsChecked_c86c558d::after{left:5px}html[dir=rtl] .field_c86c558d.fieldIsChecked_c86c558d::after{right:5px}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsChecked_c86c558d::after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsChecked_c86c558d::after{background-color:#37006e}}.field_c86c558d.fieldIsChecked_c86c558d:focus::before,.field_c86c558d.fieldIsChecked_c86c558d:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.field_c86c558d.fieldIsDisabled_c86c558d{cursor:default}.field_c86c558d.fieldIsDisabled_c86c558d:focus::before,.field_c86c558d.fieldIsDisabled_c86c558d:hover::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_c86c558d.fieldIsDisabled_c86c558d::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsDisabled_c86c558d::before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsDisabled_c86c558d::before{border-color:#600000}}.field_c86c558d.fieldIsDisabled_c86c558d .ms-Label{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_c86c558d.fieldIsDisabled_c86c558d .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_c86c558d.fieldIsDisabled_c86c558d .ms-Label{color:#600000}}.field_c86c558d.choiceFieldIsInFocus_c86c558d::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_c86c558d.choiceFieldIsInFocus_c86c558d.fieldIsDisabled_c86c558d::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_c86c558d.choiceFieldIsInFocus_c86c558d.fieldIsChecked_c86c558d::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.choiceFieldIsIcon_c86c558d,.choiceFieldIsImage_c86c558d{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:0;margin:0 4px 4px 0;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}html[dir=rtl] .choiceFieldIsIcon_c86c558d,html[dir=rtl] .choiceFieldIsImage_c86c558d{margin:0 0 4px 4px}html[dir=ltr] .choiceFieldIsIcon_c86c558d,html[dir=ltr] .choiceFieldIsImage_c86c558d{padding-left:0}html[dir=rtl] .choiceFieldIsIcon_c86c558d,html[dir=rtl] .choiceFieldIsImage_c86c558d{padding-right:0}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d{display:inline-block;box-sizing:border-box;min-width:96px;cursor:pointer;padding:4px;padding-top:22px;margin:0;text-align:center;transition:all .2s ease;border:2px solid transparent}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d{cursor:default}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d.fieldIsDisabled_c86c558d .innerField_c86c558d{opacity:.25}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d{position:relative;padding:0 28px}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d{padding-bottom:2px;transition:opacity .2s ease}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d.imageWrapperIsHidden_c86c558d{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .innerField_c86c558d .imageWrapper_c86c558d .ms-Image{display:inline-block}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d{display:inline-block;position:relative;margin:4px 0 0 0;height:32px;line-height:16px;overflow-y:hidden;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d .ms-Label,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d .ms-Label,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d .labelWrapper_c86c558d .ms-Label,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d .labelWrapper_c86c558d .ms-Label{padding:0}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{top:3px;opacity:0}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{right:3px}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{left:3px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{left:auto}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::before,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::before{right:auto}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{top:13px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{right:13px}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{left:13px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{left:auto}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d::after{right:auto}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):focus::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d):hover::before{opacity:1}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::before{opacity:1}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after{top:8px}html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=ltr] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=ltr] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after{right:8px}html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=rtl] .choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after,html[dir=rtl] .choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d::after{left:8px}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover{border-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::before,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::before{border-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsIcon_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsIcon_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsImage_c86c558d .fieldIsIcon_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:focus::after,.choiceFieldIsImage_c86c558d .fieldIsImage_c86c558d:not(.fieldIsDisabled_c86c558d).fieldIsChecked_c86c558d:hover::after{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_c86c558d{height:96px;width:96px}.choiceFieldIsIcon_c86c558d .iconWrapper_c86c558d{font-size:32px;line-height:32px;height:32px}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsIcon_c86c558d::-moz-focus-inner,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsImage_c86c558d::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsIcon_c86c558d,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsImage_c86c558d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsIcon_c86c558d:focus:after,.ms-Fabric.is-focusVisible .ms-Fabric.is-focusVisible .choiceFieldIsInFocus_c86c558d.choiceFieldIsImage_c86c558d:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ChoiceGroup.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'choiceGroup').
then(function () {
phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_not_pressed');
}).then(function () {
this.mouse.move('.ChoiceGroup');
phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_hovered');
}).then(function () {
this.mouse.down('.ChoiceGroup');
phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_pressed');
}).
then(function () {
phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_not_pressed');
}).then(function () {
this.mouse.move('.ChoiceGroupIcon');
phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_hovered');
}).then(function () {
this.mouse.down('.ChoiceGroupIcon');
phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_pressed');
}).then(function () {
phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_not_pressed');
}).then(function () {
this.mouse.move('.ChoiceGroupDisabled');
phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_hovered');
}).then(function () {
this.mouse.down('.ChoiceGroupDisabled');
phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=ChoiceGroup.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var ChoiceGroup_Basic_Example_1 = require("./examples/ChoiceGroup.Basic.Example");
var ChoiceGroup_Image_Example_1 = require("./examples/ChoiceGroup.Image.Example");
var ChoiceGroup_Icon_Example_1 = require("./examples/ChoiceGroup.Icon.Example");
var ChoiceGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx');
var ChoiceGroupImageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx');
var ChoiceGroupIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx');
var ChoiceGroupPage = (function (_super) {
__extends(ChoiceGroupPage, _super);
function ChoiceGroupPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChoiceGroupPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ChoiceGroup', componentName: 'ChoiceGroupExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups', code: ChoiceGroupBasicExampleCode },
React.createElement(ChoiceGroup_Basic_Example_1.ChoiceGroupBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups using Images', code: ChoiceGroupImageExampleCode },
React.createElement(ChoiceGroup_Image_Example_1.ChoiceGroupImageExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups using Icons', code: ChoiceGroupIconExampleCode },
React.createElement(ChoiceGroup_Icon_Example_1.ChoiceGroupIconExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group."),
React.createElement("p", null, "ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead."),
React.createElement("p", null, "If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for \"I agree\" instead of ChoiceGroup buttons for \"I agree\" and \"I don't agree.\"")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list. "),
React.createElement("li", null, "Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable."),
React.createElement("li", null, "List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable."),
React.createElement("li", null, "If none of the options is a valid choice, add another option to reflect this choice, such as \"None\" or \"Does not apply\"."),
React.createElement("li", null, "Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option."),
React.createElement("li", null, "Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead."),
React.createElement("li", null, "Use if there are more than 7 options, use a Dropdown instead."),
React.createElement("li", null, "Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/ChoiceFieldGroup/ChoiceFieldGroup.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ChoiceGroupPage;
}(React.Component));
exports.ChoiceGroupPage = ChoiceGroupPage;
//# sourceMappingURL=ChoiceGroupPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var ChoiceGroupVPage = (function (_super) {
__extends(ChoiceGroupVPage, _super);
function ChoiceGroupVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChoiceGroupVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.ChoiceGroup, { label: 'Choice Group', className: 'ChoiceGroup', defaultSelectedKey: 'bar', options: [{
key: 'bar',
text: 'Bar chart'
}, {
key: 'pie',
text: 'Pie chart'
}
] })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.ChoiceGroup, { label: 'Choice Group Icon', className: 'ChoiceGroupIcon', defaultSelectedKey: 'day', options: [{
key: 'day',
iconProps: { iconName: 'CalendarDay' },
text: 'Day'
}, {
key: 'week',
iconProps: { iconName: 'CalendarWeek' },
text: 'Week'
}] })),
React.createElement("div", { style: { backgroundColor: 'white' } },
React.createElement(index_1.ChoiceGroup, { label: 'Choice Group Disabled', className: 'ChoiceGroupDisabled', defaultSelectedKey: 'bar', disabled: true, options: [{
key: 'bar',
text: 'Bar chart'
}, {
key: 'pie',
text: 'Pie chart'
}
] })));
};
return ChoiceGroupVPage;
}(React.Component));
exports.default = ChoiceGroupVPage;
//# sourceMappingURL=ChoiceGroupPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 6 6 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./ChoiceGroup")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ColorPicker.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| ColorPicker.js | 13.24% | (9 / 68) | 14.89% | (7 / 47) | 4.55% | (1 / 22) | 14.52% | (9 / 62) | |
| ColorPicker.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| ColorPickerPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| ColorRectangle.js | 13.64% | (9 / 66) | 17.95% | (7 / 39) | 7.14% | (1 / 14) | 15% | (9 / 60) | |
| ColorSlider.js | 14.75% | (9 / 61) | 17.07% | (7 / 41) | 7.69% | (1 / 13) | 16.36% | (9 / 55) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=ColorPicker.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var TextField_1 = require("../../TextField");
var ColorRectangle_1 = require("./ColorRectangle");
var ColorSlider_1 = require("./ColorSlider");
var colors_1 = require("../../utilities/color/colors");
var styles = require("./ColorPicker.scss");
var ColorPicker = (function (_super) {
__extends(ColorPicker, _super);
function ColorPicker(props) {
var _this = _super.call(this, props) || this;
_this.state = {
color: colors_1.getColorFromString(props.color)
};
return _this;
}
ColorPicker.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.color) {
this._updateColor(colors_1.getColorFromString(newProps.color));
}
};
ColorPicker.prototype.render = function () {
var _this = this;
var color = this.state.color;
return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', styles.root) },
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', styles.panel) },
React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
!this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', styles.colorSliderIsAlpha), overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChanged: this._onAChanged })),
React.createElement("table", { className: 'ms-ColorPicker-table', cellPadding: '0', cellSpacing: '0' },
React.createElement("thead", null,
React.createElement("tr", { className: 'ms-font-s' },
React.createElement("td", null, "Hex"),
React.createElement("td", null, "Red"),
React.createElement("td", null, "Green"),
React.createElement("td", null, "Blue"),
!this.props.alphaSliderHidden && (React.createElement("td", null, "Alpha")))),
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", null,
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return _this.rText = ref; } })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return _this.gText = ref; } })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return _this.bText = ref; } })),
!this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; } })))))))));
};
ColorPicker.prototype._onSVChanged = function (s, v) {
this._updateColor(colors_1.updateSV(this.state.color, s, v));
};
ColorPicker.prototype._onHChanged = function (h) {
this._updateColor(colors_1.updateH(this.state.color, h));
};
ColorPicker.prototype._onAChanged = function (a) {
this._updateColor(colors_1.updateA(this.state.color, a));
};
ColorPicker.prototype._onHexChanged = function () {
this._updateColor(colors_1.getColorFromString('#' + this.hexText.value));
};
ColorPicker.prototype._onRGBAChanged = function () {
this._updateColor(colors_1.getColorFromRGBA({
r: Number(this.rText.value),
g: Number(this.gText.value),
b: Number(this.bText.value),
a: Number(this.aText.value)
}));
};
ColorPicker.prototype._updateColor = function (newColor) {
var onColorChanged = this.props.onColorChanged;
if (newColor.str !== this.state.color.str) {
this.setState({
color: newColor
}, function () {
if (onColorChanged) {
onColorChanged(newColor.str);
}
});
}
};
return ColorPicker;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onSVChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onHChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onAChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onHexChanged", null);
__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onRGBAChanged", null);
exports.ColorPicker = ColorPicker;
//# sourceMappingURL=ColorPicker.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_f2c456e1',
panel: 'panel_f2c456e1',
colorRect: 'colorRect_f2c456e1',
rectContainer: 'rectContainer_f2c456e1',
capture: 'capture_f2c456e1',
rectContainerIsAdjusting: 'rectContainerIsAdjusting_f2c456e1',
thumb: 'thumb_f2c456e1',
thumbIsSlider: 'thumbIsSlider_f2c456e1',
light: 'light_f2c456e1',
dark: 'dark_f2c456e1',
slider: 'slider_f2c456e1',
colorSliderIsHue: 'colorSliderIsHue_f2c456e1',
colorSliderIsAlpha: 'colorSliderIsAlpha_f2c456e1',
sliderOverlay: 'sliderOverlay_f2c456e1',
input: 'input_f2c456e1',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_f2c456e1{position:relative;max-width:300px}.panel_f2c456e1{padding:16px}.colorRect_f2c456e1{position:relative;margin-bottom:10px}.rectContainer_f2c456e1{position:relative}.capture_f2c456e1{position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(255,0,0,.1)}.rectContainer_f2c456e1.rectContainerIsAdjusting_f2c456e1 .capture_f2c456e1{position:fixed}.thumb_f2c456e1{position:absolute;width:20px;height:20px;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 15px -5px #000;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.thumb_f2c456e1.thumbIsSlider_f2c456e1{top:50%}.light_f2c456e1{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to right,#fff 0,transparent 100%)}.dark_f2c456e1{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to bottom,transparent 0,#000 100%)}.slider_f2c456e1{position:relative;height:20px;margin-bottom:5px;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}.slider_f2c456e1.colorSliderIsHue_f2c456e1{background:linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%)}.slider_f2c456e1.colorSliderIsAlpha_f2c456e1{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.sliderOverlay_f2c456e1{content:'';position:absolute;left:0;right:0;top:0;bottom:0}.input_f2c456e1{width:100%;border:none;box-sizing:border-box;height:30px}.input_f2c456e1.ms-TextField{padding-right:2px}.input_f2c456e1 .input_f2c456e1.ms-TextField-field{min-width:auto;padding:5px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ColorPicker.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var ColorPicker_Basic_Example_1 = require("./examples/ColorPicker.Basic.Example");
var ColorPickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx');
var ColorPickerPage = (function (_super) {
__extends(ColorPickerPage, _super);
function ColorPickerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ColorPickerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ColorPicker', componentName: 'ColorPickerExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'ColorPicker', code: ColorPickerBasicExampleCode },
React.createElement(ColorPicker_Basic_Example_1.ColorPickerBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/ColorPicker.Props.ts')
] }), overview: React.createElement("div", null, "ColorPicker is used to allow a user to select a color"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ColorPickerPage;
}(React.Component));
exports.ColorPickerPage = ColorPickerPage;
//# sourceMappingURL=ColorPickerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var colors_1 = require("../../utilities/color/colors");
var styles = require("./ColorPicker.scss");
var ColorRectangle = (function (_super) {
__extends(ColorRectangle, _super);
function ColorRectangle(props) {
var _this = _super.call(this, props) || this;
var color = _this.props.color;
_this.state = {
isAdjusting: false,
origin: null,
color: color,
fullColorString: colors_1.getFullColorString(color)
};
return _this;
}
ColorRectangle.prototype.componentWillUnmount = function () {
this._events.dispose();
};
ColorRectangle.prototype.componentWillReceiveProps = function (newProps) {
var color = newProps.color;
this.setState({
color: color,
fullColorString: colors_1.getFullColorString(color)
});
};
ColorRectangle.prototype.render = function () {
var minSize = this.props.minSize;
var _a = this.state, color = _a.color, fullColorString = _a.fullColorString;
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-colorRect', styles.colorRect), style: { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString }, onMouseDown: this._onMouseDown },
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-light', styles.light) }),
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-dark', styles.dark) }),
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb', styles.thumb), style: { left: color.s + '%', top: (colors_1.MAX_COLOR_VALUE - color.v) + '%', backgroundColor: color.str } })));
};
ColorRectangle.prototype._onMouseDown = function (ev) {
this._events.on(window, 'mousemove', this._onMouseMove, true);
this._events.on(window, 'mouseup', this._onMouseUp, true);
this._onMouseMove(ev);
};
ColorRectangle.prototype._onMouseMove = function (ev) {
var _a = this.props, color = _a.color, onSVChanged = _a.onSVChanged;
var rectSize = this.refs.root.getBoundingClientRect();
var sPercentage = (ev.clientX - rectSize.left) / rectSize.width;
var vPercentage = (ev.clientY - rectSize.top) / rectSize.height;
var newColor = Utilities_1.assign({}, color, {
s: Math.min(colors_1.MAX_COLOR_SATURATION, Math.max(0, sPercentage * colors_1.MAX_COLOR_SATURATION)),
v: Math.min(colors_1.MAX_COLOR_VALUE, Math.max(0, colors_1.MAX_COLOR_VALUE - (vPercentage * colors_1.MAX_COLOR_VALUE))),
});
newColor.hex = colors_1.hsv2hex(newColor.h, newColor.s, newColor.v);
newColor.str = newColor.a === 100 ? '#' + newColor.hex : "rgba(" + newColor.r + ", " + newColor.g + ", " + newColor.b + ", " + newColor.a / 100 + ")";
this.setState({
isAdjusting: true,
color: newColor
});
if (onSVChanged) {
onSVChanged(newColor.s, newColor.v);
}
ev.preventDefault();
ev.stopPropagation();
};
ColorRectangle.prototype._onMouseUp = function (ev) {
this._events.off();
this.setState({
isAdjusting: false,
origin: null
});
};
return ColorRectangle;
}(Utilities_1.BaseComponent));
ColorRectangle.defaultProps = {
minSize: 220
};
__decorate([
Utilities_1.autobind
], ColorRectangle.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], ColorRectangle.prototype, "_onMouseMove", null);
__decorate([
Utilities_1.autobind
], ColorRectangle.prototype, "_onMouseUp", null);
exports.ColorRectangle = ColorRectangle;
//# sourceMappingURL=ColorRectangle.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./ColorPicker.scss");
var ColorSlider = (function (_super) {
__extends(ColorSlider, _super);
function ColorSlider(props) {
var _this = _super.call(this, props) || this;
var value = _this.props.value;
_this.state = {
isAdjusting: false,
origin: null,
currentValue: value
};
return _this;
}
ColorSlider.prototype.componentWillReceiveProps = function (newProps) {
if (newProps && newProps.value) {
this.setState({ currentValue: newProps.value });
}
};
ColorSlider.prototype.render = function () {
var _a = this.props, className = _a.className, minValue = _a.minValue, maxValue = _a.maxValue, overlayStyle = _a.overlayStyle;
var _b = this.state, currentValue = _b.currentValue, isAdjusting = _b.isAdjusting;
var currentPercentage = 100 * (currentValue - minValue) / (maxValue - minValue);
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-slider', styles.slider, className, {
'is-adjusting': isAdjusting
}), onMouseDown: this._onMouseDown },
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-sliderOverlay', styles.sliderOverlay), style: overlayStyle }),
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb is-slider', styles.thumb, styles.thumbIsSlider), style: { left: currentPercentage + '%' } })));
};
ColorSlider.prototype._onMouseDown = function (ev) {
this._events.on(window, 'mousemove', this._onMouseMove, true);
this._events.on(window, 'mouseup', this._onMouseUp, true);
this._onMouseMove(ev);
};
ColorSlider.prototype._onMouseMove = function (ev) {
var _a = this.props, onChanged = _a.onChanged, minValue = _a.minValue, maxValue = _a.maxValue;
var rectSize = this.refs.root.getBoundingClientRect();
var currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
var newValue = Math.min(maxValue, Math.max(minValue, currentPercentage * maxValue));
this.setState({
isAdjusting: true,
currentValue: newValue
});
if (onChanged) {
onChanged(newValue);
}
ev.preventDefault();
ev.stopPropagation();
};
ColorSlider.prototype._onMouseUp = function (ev) {
this._events.off();
this.setState({
isAdjusting: false,
origin: null
});
};
return ColorSlider;
}(Utilities_1.BaseComponent));
ColorSlider.defaultProps = {
minValue: 0,
maxValue: 100,
thumbColor: 'inherit',
value: 0
};
__decorate([
Utilities_1.autobind
], ColorSlider.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], ColorSlider.prototype, "_onMouseMove", null);
__decorate([
Utilities_1.autobind
], ColorSlider.prototype, "_onMouseUp", null);
exports.ColorSlider = ColorSlider;
//# sourceMappingURL=ColorSlider.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./ColorPicker")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| CommandBar.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| CommandBar.js | 6.13% | (10 / 163) | 6.62% | (10 / 151) | 3.45% | (1 / 29) | 6.49% | (10 / 154) | |
| CommandBar.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| CommandBarPage.js | 25.71% | (9 / 35) | 35% | (7 / 20) | 11.11% | (1 / 9) | 29.03% | (9 / 31) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=CommandBar.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var ContextualMenu_1 = require("../../ContextualMenu");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var Icon_1 = require("../../Icon");
var styles = require("./CommandBar.scss");
var OVERFLOW_KEY = 'overflow';
var OVERFLOW_WIDTH = 41.5;
var CommandBar = (function (_super) {
__extends(CommandBar, _super);
function CommandBar(props) {
var _this = _super.call(this, props) || this;
_this.state = _this._getStateFromProps(props);
_this._id = Utilities_1.getId('CommandBar');
return _this;
}
CommandBar.prototype.componentDidMount = function () {
this._updateItemMeasurements();
this._updateRenderedItems();
this._events.on(window, 'resize', this._updateRenderedItems);
};
CommandBar.prototype.componentWillReceiveProps = function (nextProps) {
this.setState(this._getStateFromProps(nextProps));
this._commandItemWidths = null;
};
CommandBar.prototype.componentDidUpdate = function (prevProps, prevStates) {
if (!this._commandItemWidths) {
this._updateItemMeasurements();
this._updateRenderedItems();
}
};
CommandBar.prototype.render = function () {
var _this = this;
var _a = this.props, isSearchBoxVisible = _a.isSearchBoxVisible, searchPlaceholderText = _a.searchPlaceholderText, className = _a.className;
var _b = this.state, renderedItems = _b.renderedItems, contextualMenuProps = _b.contextualMenuProps, expandedMenuItemKey = _b.expandedMenuItemKey, expandedMenuId = _b.expandedMenuId, renderedOverflowItems = _b.renderedOverflowItems, contextualMenuTarget = _b.contextualMenuTarget, renderedFarItems = _b.renderedFarItems;
var searchBox;
if (isSearchBoxVisible) {
searchBox = (React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch', styles.search), ref: 'searchSurface' },
React.createElement("input", { className: Utilities_1.css('ms-CommandBarSearch-input', styles.searchInput), type: 'text', placeholder: searchPlaceholderText }),
React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper', styles.searchIconWrapper, styles.searchIconSearchWrapper) },
React.createElement("i", { className: Utilities_1.css('ms-Icon ms-Icon--Search') })),
React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s', styles.searchIconWrapper, styles.searchIconClearWrapper) },
React.createElement("i", { className: Utilities_1.css('ms-Icon ms-Icon--Cancel') }))));
}
return (React.createElement("div", { className: Utilities_1.css('ms-CommandBar', styles.root, className), ref: 'commandBarRegion' },
searchBox,
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal, role: 'menubar' },
React.createElement("div", { className: Utilities_1.css('ms-CommandBar-primaryCommands', styles.primaryCommands), ref: 'commandSurface' }, renderedItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey)); }).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
React.createElement("button", { type: 'button', id: this._id + OVERFLOW_KEY, className: Utilities_1.css('ms-CommandBarItem-link', styles.itemLink, (_c = {},
_c['is-expanded ' + styles.itemLinkIsExpanded] = (expandedMenuItemKey === OVERFLOW_KEY),
_c)), onClick: this._onOverflowClick, role: 'menuitem', "aria-label": this.props.elipisisAriaLabel || '', "aria-haspopup": true, "data-automation-id": 'commandBarOverflow' },
React.createElement("i", { className: Utilities_1.css('ms-CommandBarItem-overflow ms-Icon ms-Icon--More', styles.itemOverflow) })))
] : [])),
React.createElement("div", { className: Utilities_1.css('ms-CommandBar-sideCommands', styles.sideCommands), ref: 'farCommandSurface' }, renderedFarItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey, true)); }))),
(contextualMenuProps) ?
(React.createElement(ContextualMenu_1.ContextualMenu, __assign({ className: Utilities_1.css('ms-CommandBar-menuHost'), isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge }, contextualMenuProps, { targetElement: contextualMenuTarget, labelElementId: expandedMenuId, onDismiss: this._onContextMenuDismiss }))) : (null)));
var _c;
};
CommandBar.prototype.focus = function () {
this.refs.focusZone.focus();
};
CommandBar.prototype._renderItemInCommandBar = function (item, index, expandedMenuItemKey, isFarItem) {
var _this = this;
var itemKey = item.key || String(index);
var isLink = item.onClick || ContextualMenu_1.hasSubmenuItems(item);
var className = Utilities_1.css(isLink ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText), !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName), (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded));
var hasIcon = !!item.icon || !!item.iconProps;
return React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item, item.className), key: itemKey, ref: itemKey }, (function () {
if (isLink) {
return React.createElement("button", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), { id: _this._id + item.key, className: className, onClick: function (ev) { return _this._onItemClick(ev, item); }, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }),
(hasIcon) ? _this._renderIcon(item) : (null),
(!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)),
ContextualMenu_1.hasSubmenuItems(item) ? (React.createElement("i", { className: Utilities_1.css('ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown', styles.itemChevronDown) })) : (null));
}
else if (item.href) {
return React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { id: _this._id + item.key, className: className, href: item.href, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }),
(hasIcon) ? _this._renderIcon(item) : (null),
(!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)));
}
else {
return React.createElement("div", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.divProperties), { id: _this._id + item.key, className: className, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item) }),
(hasIcon) ? _this._renderIcon(item) : (null),
React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular', styles.itemCommandText), "aria-hidden": 'true', role: 'presentation' }, item.name));
}
})());
};
CommandBar.prototype._renderIcon = function (item) {
// Only present to allow continued use of item.icon which is deprecated.
var iconProps = item.iconProps ? item.iconProps : {
iconName: item.icon
};
// Use the default icon color for the known icon names
var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
var iconClassName = Utilities_1.css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName }));
};
CommandBar.prototype._updateItemMeasurements = function () {
// the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5
if (this.refs[OVERFLOW_KEY] || (this.props.overflowItems && this.props.overflowItems.length)) {
this._overflowWidth = OVERFLOW_WIDTH;
}
else {
this._overflowWidth = 0;
}
if (!this._commandItemWidths) {
this._commandItemWidths = {};
}
for (var i = 0; i < this.props.items.length; i++) {
var item = this.props.items[i];
if (!this._commandItemWidths[item.key]) {
var el = this.refs[item.key];
if (el) {
this._commandItemWidths[item.key] = el.getBoundingClientRect().width;
}
}
}
};
CommandBar.prototype._updateRenderedItems = function () {
var _a = this.props, items = _a.items, overflowItems = _a.overflowItems;
var commandSurface = this.refs.commandSurface;
var farCommandSurface = this.refs.farCommandSurface;
var commandBarRegion = this.refs.commandBarRegion;
var searchSurface = this.refs.searchSurface;
var renderedItems = [].concat(items);
var renderedOverflowItems = overflowItems;
var consumedWidth = 0;
var isOverflowVisible = overflowItems && overflowItems.length;
var style = window.getComputedStyle(commandSurface);
var availableWidth = commandBarRegion.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
if (searchSurface) {
availableWidth -= searchSurface.getBoundingClientRect().width;
}
if (farCommandSurface) {
availableWidth -= farCommandSurface.getBoundingClientRect().width;
}
if (isOverflowVisible) {
availableWidth -= this._overflowWidth;
}
for (var i = 0; i < renderedItems.length; i++) {
var item = renderedItems[i];
var itemWidth = this._commandItemWidths[item.key];
if ((consumedWidth + itemWidth) >= availableWidth) {
if (i > 0 && !isOverflowVisible && (availableWidth - consumedWidth) < OVERFLOW_WIDTH) {
i--;
}
renderedOverflowItems = renderedItems.splice(i).concat(overflowItems);
break;
}
else {
consumedWidth += itemWidth;
}
}
var renderedContextualMenuProps = this._getContextualMenuPropsAfterUpdate(renderedItems.concat(this.state.renderedFarItems), renderedOverflowItems);
this.setState({
renderedItems: renderedItems,
renderedOverflowItems: renderedOverflowItems,
expandedMenuItemKey: renderedContextualMenuProps ? this.state.expandedMenuItemKey : null,
contextualMenuProps: renderedContextualMenuProps,
contextualMenuTarget: renderedContextualMenuProps ? this.state.contextualMenuTarget : null
});
};
CommandBar.prototype._onItemClick = function (ev, item) {
if (item.key === this.state.expandedMenuItemKey || !ContextualMenu_1.hasSubmenuItems(item)) {
this._onContextMenuDismiss();
}
else {
this.setState({
expandedMenuId: ev.currentTarget.id,
expandedMenuItemKey: item.key,
contextualMenuProps: this._getContextualMenuPropsFromItem(item),
contextualMenuTarget: ev.currentTarget
});
}
if (item.onClick) {
item.onClick(ev, item);
}
};
CommandBar.prototype._onOverflowClick = function (ev) {
if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
this._onContextMenuDismiss();
}
else {
this.setState({
expandedMenuId: ev.currentTarget.id,
expandedMenuItemKey: OVERFLOW_KEY,
contextualMenuProps: { items: this.state.renderedOverflowItems },
contextualMenuTarget: ev.currentTarget
});
}
};
CommandBar.prototype._onContextMenuDismiss = function (ev) {
if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget)) {
var contextualMenuProps = this.state.contextualMenuProps;
if (contextualMenuProps && contextualMenuProps.onDismiss) {
this.state.contextualMenuProps.onDismiss(ev);
}
this.setState({
expandedMenuItemKey: null,
contextualMenuProps: null,
contextualMenuTarget: null
});
}
else {
ev.stopPropagation();
ev.preventDefault();
}
};
CommandBar.prototype._getStateFromProps = function (nextProps) {
return {
renderedItems: nextProps.items || [],
renderedOverflowItems: null,
contextualMenuProps: this._getContextualMenuPropsAfterUpdate(nextProps.items.concat(nextProps.farItems), nextProps.overflowItems),
renderedFarItems: nextProps.farItems || null
};
};
CommandBar.prototype._getContextualMenuPropsAfterUpdate = function (renderedItems, overflowItems) {
var _this = this;
if (this.state && this.state.expandedMenuItemKey) {
if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
// Keep the overflow menu open
return { items: overflowItems };
}
else {
// Find the currently open key in the new props
var matchingItem = renderedItems.filter(function (item) { return item.key === _this.state.expandedMenuItemKey; });
if (matchingItem.length === 1) {
return this._getContextualMenuPropsFromItem(matchingItem[0]);
}
}
}
return null;
};
CommandBar.prototype._getContextualMenuPropsFromItem = function (item) {
return item.subMenuProps || (item.items && { items: item.items });
};
return CommandBar;
}(Utilities_1.BaseComponent));
CommandBar.defaultProps = {
items: [],
overflowItems: [],
farItems: []
};
__decorate([
Utilities_1.autobind
], CommandBar.prototype, "_onOverflowClick", null);
__decorate([
Utilities_1.autobind
], CommandBar.prototype, "_onContextMenuDismiss", null);
exports.CommandBar = CommandBar;
//# sourceMappingURL=CommandBar.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_6ec53214',
primaryCommands: 'primaryCommands_6ec53214',
sideCommands: 'sideCommands_6ec53214',
item: 'item_6ec53214',
itemChevronDown: 'itemChevronDown_6ec53214',
itemCommandText: 'itemCommandText_6ec53214',
itemText: 'itemText_6ec53214',
itemLinkIsNoName: 'itemLinkIsNoName_6ec53214',
itemLink: 'itemLink_6ec53214',
itemLinkIsExpanded: 'itemLinkIsExpanded_6ec53214',
itemIcon: 'itemIcon_6ec53214',
itemOverflow: 'itemOverflow_6ec53214',
itemIconColor: 'itemIconColor_6ec53214',
search: 'search_6ec53214',
searchInput: 'searchInput_6ec53214',
searchIconSearchWrapper: 'searchIconSearchWrapper_6ec53214',
searchIconArrowWrapper: 'searchIconArrowWrapper_6ec53214',
searchIconClearWrapper: 'searchIconClearWrapper_6ec53214',
searchIconWrapper: 'searchIconWrapper_6ec53214',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_6ec53214{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";height:40px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.primaryCommands_6ec53214{position:absolute;overflow:hidden;display:inline;vertical-align:top;line-height:40px;max-width:100%;margin:0 20px}.sideCommands_6ec53214{position:absolute}html[dir=ltr] .sideCommands_6ec53214{right:0}html[dir=rtl] .sideCommands_6ec53214{left:0}html[dir=ltr] .sideCommands_6ec53214{text-align:right}html[dir=rtl] .sideCommands_6ec53214{text-align:left}html[dir=ltr] .sideCommands_6ec53214{padding-right:20px}html[dir=rtl] .sideCommands_6ec53214{padding-left:20px}.item_6ec53214{display:inline-block;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:40px;outline:transparent;vertical-align:top;margin:0 4px}.item_6ec53214:hover{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemChevronDown_6ec53214,.itemCommandText_6ec53214{display:inline-block;padding:0 4px;vertical-align:top}.itemText_6ec53214{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%}.itemText_6ec53214::-moz-focus-inner{border:0}.itemText_6ec53214{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemText_6ec53214:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemText_6ec53214.itemLinkIsNoName_6ec53214{padding:0 8px}.itemLink_6ec53214{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%;cursor:pointer}.itemLink_6ec53214::-moz-focus-inner{border:0}.itemLink_6ec53214{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemLink_6ec53214:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsNoName_6ec53214{padding:0 8px}@media screen and (-ms-high-contrast:active){.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::-moz-focus-inner,.itemLink_6ec53214:hover::-moz-focus-inner{border:0}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214,.itemLink_6ec53214:hover{outline:transparent;position:relative}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::after,.itemLink_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::-moz-focus-inner,.itemLink_6ec53214:hover::-moz-focus-inner{border:0}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214,.itemLink_6ec53214:hover{outline:transparent;position:relative}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214::after,.itemLink_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.itemLink_6ec53214:hover:not([disabled]){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.itemLink_6ec53214:hover:not([disabled]) .itemIcon_6ec53214{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.itemLink_6ec53214:hover:not([disabled]) .itemChevronDown_6ec53214{color:" }, { "theme": "neutralPrimaryAlt", "defaultValue": "#3c3c3c" }, { "rawString": "}.itemLink_6ec53214:hover:not([disabled]) .itemOverflow_6ec53214{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214 .itemIcon_6ec53214{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214 .itemChevronDown_6ec53214{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214 .itemOverflow_6ec53214{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.itemLink_6ec53214.itemLinkIsExpanded_6ec53214:hover{background-color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.itemLink_6ec53214[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.itemLink_6ec53214[disabled] .itemIcon_6ec53214{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.itemIcon_6ec53214{font-size:16px;padding:0 4px}.itemIconColor_6ec53214{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.itemChevronDown_6ec53214{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:12px}.itemOverflow_6ec53214{font-size:18px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:0 7px}.search_6ec53214{width:208px;max-width:208px;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:40px;position:relative;box-sizing:border-box;border-color:transparent}html[dir=ltr] .search_6ec53214{float:left}html[dir=rtl] .search_6ec53214{float:right}html[dir=ltr] .search_6ec53214{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .search_6ec53214{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.search_6ec53214{z-index:10}html[dir=ltr] .search_6ec53214{border-right:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=rtl] .search_6ec53214{border-left:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){html[dir=ltr] .search_6ec53214{border-right:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}html[dir=rtl] .search_6ec53214{border-left:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.search_6ec53214:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.search_6ec53214:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.search_6ec53214:hover::-moz-focus-inner{border:0}.search_6ec53214:hover{outline:transparent;position:relative}.search_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.search_6ec53214:hover::-moz-focus-inner{border:0}.search_6ec53214:hover{outline:transparent;position:relative}.search_6ec53214:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.searchInput_6ec53214{height:40px;padding:8px 8px 8px 0;border:none;background-color:transparent;width:100%;box-sizing:border-box;outline:0;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}html[dir=ltr] .searchInput_6ec53214{border-left:42px solid transparent}html[dir=rtl] .searchInput_6ec53214{border-right:42px solid transparent}@media screen and (-ms-high-contrast:active){html[dir=ltr] .searchInput_6ec53214{border-left:40px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}html[dir=rtl] .searchInput_6ec53214{border-right:40px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){html[dir=ltr] .searchInput_6ec53214{border-left:40px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=rtl] .searchInput_6ec53214{border-right:40px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.searchInput_6ec53214::-ms-clear{display:none}.searchIconSearchWrapper_6ec53214{display:block}.searchIconArrowWrapper_6ec53214{display:none}.searchIconArrowWrapper_6ec53214,.searchIconSearchWrapper_6ec53214{top:0}html[dir=ltr] .searchIconArrowWrapper_6ec53214,html[dir=ltr] .searchIconSearchWrapper_6ec53214{padding-left:17px}html[dir=rtl] .searchIconArrowWrapper_6ec53214,html[dir=rtl] .searchIconSearchWrapper_6ec53214{padding-right:17px}html[dir=ltr] .searchIconArrowWrapper_6ec53214,html[dir=ltr] .searchIconSearchWrapper_6ec53214{padding-right:8px}html[dir=rtl] .searchIconArrowWrapper_6ec53214,html[dir=rtl] .searchIconSearchWrapper_6ec53214{padding-left:8px}.searchIconClearWrapper_6ec53214{display:none;top:1px;z-index:10}html[dir=ltr] .searchIconClearWrapper_6ec53214{right:0}html[dir=rtl] .searchIconClearWrapper_6ec53214{left:0}.searchIconWrapper_6ec53214{height:40px;line-height:40px;cursor:pointer;position:absolute;text-align:center}.search_6ec53214 .ms-Icon:before{font-size:16px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.searchInput_6ec53214,.searchInput_6ec53214::-webkit-input-placeholder{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=CommandBar.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var data_1 = require("./examples/data");
var CommandBar_Basic_Example_1 = require("./examples/CommandBar.Basic.Example");
var CommandBar_NonFocusable_Example_1 = require("./examples/CommandBar.NonFocusable.Example");
var CommandBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx');
var CommandBarNoFocusableItemsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx');
var CommandBarPage = (function (_super) {
__extends(CommandBarPage, _super);
function CommandBarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
CommandBarPage.prototype.render = function () {
var cmdBarParamsTextAndIcons = { items: data_1.items, farItems: data_1.farItems };
return (React.createElement(example_app_base_1.ComponentPage, { title: 'CommandBar', componentName: 'CommandBarExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'CommandBar with search box and overflowing menu items', code: CommandBarBasicExampleCode },
React.createElement(CommandBar_Basic_Example_1.CommandBarBasicExample, __assign({}, cmdBarParamsTextAndIcons))),
React.createElement(example_app_base_1.ExampleCard, { title: 'CommandBar with non-focusable items', code: CommandBarNoFocusableItemsExampleCode },
React.createElement(CommandBar_NonFocusable_Example_1.CommandBarNonFocusableItemsExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/CommandBar.Props.ts'),
require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions."),
React.createElement("p", null, "Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse."),
React.createElement("p", null, "All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Sort commands in order of importance from left to right or right to left depending on the culture."),
React.createElement("li", null, "Organize commands into logical groupings."),
React.createElement("li", null, "Display no more than 5-7 commands."),
React.createElement("li", null, "Use overflow to house less frequently-used commands."),
React.createElement("li", null, "In small breakpoints, only have the most recognizable commands render as icon only."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Fill the command bar completely from left to right."),
React.createElement("li", null, "Use icons only for commands in larger widths."),
React.createElement("li", null, "Display more than 2-3 items on the right side of the bar (or left side in left to right experiences)."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/CommandBar/CommandBar.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return CommandBarPage;
}(React.Component));
exports.CommandBarPage = CommandBarPage;
//# sourceMappingURL=CommandBarPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./CommandBar")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ContextualMenu.Props.js | 100% | (8 / 8) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (8 / 8) | |
| ContextualMenu.js | 6.11% | (14 / 229) | 5.49% | (10 / 182) | 2.04% | (1 / 49) | 6.45% | (14 / 217) | |
| ContextualMenu.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| ContextualMenu.visualtest.js | 30% | (3 / 10) | 100% | (0 / 0) | 0% | (0 / 4) | 33.33% | (3 / 9) | |
| ContextualMenuPage.js | 25% | (8 / 32) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 27.59% | (8 / 29) | |
| ContextualMenuPage.visualtest.js | 29.17% | (7 / 24) | 28.57% | (4 / 14) | 10% | (1 / 10) | 33.33% | (7 / 21) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DirectionalHint_1 = require("../../common/DirectionalHint");
exports.DirectionalHint = DirectionalHint_1.DirectionalHint;
var ContextualMenuItemType;
(function (ContextualMenuItemType) {
ContextualMenuItemType[ContextualMenuItemType["Normal"] = 0] = "Normal";
ContextualMenuItemType[ContextualMenuItemType["Divider"] = 1] = "Divider";
ContextualMenuItemType[ContextualMenuItemType["Header"] = 2] = "Header";
})(ContextualMenuItemType = exports.ContextualMenuItemType || (exports.ContextualMenuItemType = {}));
//# sourceMappingURL=ContextualMenu.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 | 8 8 8 1 8 8 8 8 8 8 8 1 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ContextualMenu_Props_1 = require("./ContextualMenu.Props");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var FocusZone_1 = require("../../FocusZone");
var Utilities_1 = require("../../Utilities");
var Callout_1 = require("../../Callout");
var Icon_1 = require("../../Icon");
var styles = require("./ContextualMenu.scss");
var ContextualMenuType;
(function (ContextualMenuType) {
ContextualMenuType[ContextualMenuType["vertical"] = 0] = "vertical";
ContextualMenuType[ContextualMenuType["horizontal"] = 1] = "horizontal";
})(ContextualMenuType || (ContextualMenuType = {}));
var HorizontalAlignmentHint;
(function (HorizontalAlignmentHint) {
HorizontalAlignmentHint[HorizontalAlignmentHint["auto"] = 0] = "auto";
HorizontalAlignmentHint[HorizontalAlignmentHint["left"] = 1] = "left";
HorizontalAlignmentHint[HorizontalAlignmentHint["center"] = 2] = "center";
HorizontalAlignmentHint[HorizontalAlignmentHint["right"] = 3] = "right";
})(HorizontalAlignmentHint || (HorizontalAlignmentHint = {}));
var VerticalAlignmentHint;
(function (VerticalAlignmentHint) {
VerticalAlignmentHint[VerticalAlignmentHint["top"] = 0] = "top";
VerticalAlignmentHint[VerticalAlignmentHint["center"] = 1] = "center";
VerticalAlignmentHint[VerticalAlignmentHint["bottom"] = 2] = "bottom";
})(VerticalAlignmentHint || (VerticalAlignmentHint = {}));
function hasSubmenuItems(item) {
var submenuItems = getSubmenuItems(item);
return !!(submenuItems && submenuItems.length);
}
exports.hasSubmenuItems = hasSubmenuItems;
function getSubmenuItems(item) {
return item.subMenuProps ? item.subMenuProps.items : item.items;
}
exports.getSubmenuItems = getSubmenuItems;
var ContextualMenu = (function (_super) {
__extends(ContextualMenu, _super);
function ContextualMenu(props) {
var _this = _super.call(this, props) || this;
_this.state = {
contextualMenuItems: null,
subMenuId: Utilities_1.getId('ContextualMenu')
};
_this._isFocusingPreviousElement = false;
_this._enterTimerId = 0;
return _this;
}
ContextualMenu.prototype.dismiss = function (ev, dismissAll) {
var onDismiss = this.props.onDismiss;
if (onDismiss) {
onDismiss(ev, dismissAll);
}
};
ContextualMenu.prototype.componentWillUpdate = function (newProps) {
if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) {
var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target;
this._setTargetWindowAndElement(newTarget);
}
};
// Invoked once, both on the client and server, immediately before the initial rendering occurs.
ContextualMenu.prototype.componentWillMount = function () {
var target = this.props.targetElement ? this.props.targetElement : this.props.target;
this._setTargetWindowAndElement(target);
this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement : null;
};
// Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
ContextualMenu.prototype.componentDidMount = function () {
this._events.on(this._targetWindow, 'resize', this.dismiss);
if (this.props.onMenuOpened) {
this.props.onMenuOpened(this.props);
}
};
// Invoked immediately before a component is unmounted from the DOM.
ContextualMenu.prototype.componentWillUnmount = function () {
var _this = this;
if (this._isFocusingPreviousElement && this._previousActiveElement) {
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
// to reset the focus back to the thing it thinks should have been focused.
setTimeout(function () { return _this._previousActiveElement.focus(); }, 0);
}
this._events.dispose();
this._async.dispose();
};
ContextualMenu.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, items = _a.items, isBeakVisible = _a.isBeakVisible, labelElementId = _a.labelElementId, targetElement = _a.targetElement, id = _a.id, targetPoint = _a.targetPoint, useTargetPoint = _a.useTargetPoint, beakWidth = _a.beakWidth, directionalHint = _a.directionalHint, gapSpace = _a.gapSpace, coverTarget = _a.coverTarget, ariaLabel = _a.ariaLabel, doNotLayer = _a.doNotLayer, arrowDirection = _a.arrowDirection, target = _a.target, bounds = _a.bounds, directionalHintFixed = _a.directionalHintFixed, shouldFocusOnMount = _a.shouldFocusOnMount;
var submenuProps = this.state.submenuProps;
var hasIcons = !!(items && items.some(function (item) { return !!item.icon || !!item.iconProps; }));
var hasCheckmarks = !!(items && items.some(function (item) { return !!item.canCheck; }));
// The menu should only return if items were provided, if no items were provided then it should not appear.
if (items && items.length > 0) {
return (React.createElement(Callout_1.Callout, { target: target, targetElement: targetElement, targetPoint: targetPoint, useTargetPoint: useTargetPoint, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: 'ms-ContextualMenu-Callout', setInitialFocus: shouldFocusOnMount, onDismiss: this.props.onDismiss, bounds: bounds, directionalHintFixed: directionalHintFixed },
React.createElement("div", { ref: function (host) { return _this._host = host; }, id: id, className: Utilities_1.css('ms-ContextualMenu-container', className) },
(items && items.length) ? (React.createElement(FocusZone_1.FocusZone, { className: Utilities_1.css('ms-ContextualMenu is-open', styles.root), direction: arrowDirection, ariaLabelledBy: labelElementId, ref: function (focusZone) { return _this._focusZone = focusZone; }, role: 'menu', isCircularNavigation: true },
React.createElement("ul", { className: Utilities_1.css('ms-ContextualMenu-list is-open', styles.list), onKeyDown: this._onKeyDown, "aria-label": ariaLabel }, items.map(function (item, index) { return (_this._renderMenuItem(item, index, hasCheckmarks, hasIcons)); })))) : (null),
submenuProps ? (React.createElement(ContextualMenu, __assign({}, submenuProps))) : (null))));
}
else {
return null;
}
};
ContextualMenu.prototype._renderMenuItem = function (item, index, hasCheckmarks, hasIcons) {
var renderedItems = [];
if (item.name === '-') {
item.itemType = ContextualMenu_Props_1.ContextualMenuItemType.Divider;
}
switch (item.itemType) {
case ContextualMenu_Props_1.ContextualMenuItemType.Divider:
renderedItems.push(this._renderSeparator(index, item.className));
break;
case ContextualMenu_Props_1.ContextualMenuItemType.Header:
renderedItems.push(this._renderSeparator(index));
var headerItem = this._renderHeaderMenuItem(item, index, hasCheckmarks, hasIcons);
renderedItems.push(this._renderListItem(headerItem, item.key || index, item.className, item.title));
break;
default:
var menuItem = this._renderNormalItem(item, index, hasCheckmarks, hasIcons);
renderedItems.push(this._renderListItem(menuItem, item.key || index, item.className, item.title));
break;
}
return renderedItems;
};
ContextualMenu.prototype._renderListItem = function (content, key, className, title) {
return React.createElement("li", { role: 'menuitem', title: title, key: key, className: Utilities_1.css('ms-ContextualMenu-item', styles.item, className) }, content);
};
ContextualMenu.prototype._renderSeparator = function (index, className) {
if (index > 0) {
return React.createElement("li", { role: 'separator', key: 'separator-' + index, className: Utilities_1.css('ms-ContextualMenu-divider', styles.divider, className) });
}
return null;
};
ContextualMenu.prototype._renderNormalItem = function (item, index, hasCheckmarks, hasIcons) {
if (item.onRender) {
return [item.onRender(item)];
}
if (item.href) {
return this._renderAnchorMenuItem(item, index, hasCheckmarks, hasIcons);
}
return this._renderButtonItem(item, index, hasCheckmarks, hasIcons);
};
ContextualMenu.prototype._renderHeaderMenuItem = function (item, index, hasCheckmarks, hasIcons) {
return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-header', styles.header), style: item.style }, this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons)));
};
ContextualMenu.prototype._renderAnchorMenuItem = function (item, index, hasCheckmarks, hasIcons) {
return (React.createElement("div", null,
React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { href: item.href, className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (item.isDisabled || item.disabled) && 'is-disabled'), style: item.style, onClick: this._onAnchorClick.bind(this, item) }), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons))));
};
ContextualMenu.prototype._renderButtonItem = function (item, index, hasCheckmarks, hasIcons) {
var _this = this;
var _a = this.state, expandedMenuItemKey = _a.expandedMenuItemKey, subMenuId = _a.subMenuId;
var ariaLabel = '';
if (item.ariaLabel) {
ariaLabel = item.ariaLabel;
}
else if (item.name) {
ariaLabel = item.name;
}
var itemButtonProperties = {
className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (_b = {},
_b['is-expanded ' + styles.isExpanded] = (expandedMenuItemKey === item.key),
_b)),
onClick: this._onItemClick.bind(this, item),
onKeyDown: hasSubmenuItems(item) ? this._onItemKeyDown.bind(this, item) : null,
onMouseEnter: this._onItemMouseEnter.bind(this, item),
onMouseLeave: this._onMouseLeave,
onMouseDown: function (ev) { return _this._onItemMouseDown(item, ev); },
disabled: item.isDisabled || item.disabled,
href: item.href,
title: item.title,
'aria-label': ariaLabel,
'aria-haspopup': hasSubmenuItems(item) ? true : null,
'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
style: item.style,
};
return React.createElement('button', Utilities_1.assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), itemButtonProperties), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
var _b;
};
ContextualMenu.prototype._renderMenuItemChildren = function (item, index, hasCheckmarks, hasIcons) {
var isItemChecked = item.isChecked || item.checked;
return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-linkContent', styles.linkContent) },
(hasCheckmarks) ? (React.createElement(Icon_1.Icon, { iconName: isItemChecked ? 'CheckMark' : 'CustomIcon', className: Utilities_1.css('ms-ContextualMenu-icon', styles.icon), onClick: this._onItemClick.bind(this, item) })) : (null),
(hasIcons) ? (this._renderIcon(item)) : (null),
React.createElement("span", { className: Utilities_1.css('ms-ContextualMenu-itemText', styles.itemText) }, item.name),
hasSubmenuItems(item) ? (React.createElement(Icon_1.Icon, __assign({ iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: Utilities_1.css('ms-ContextualMenu-submenuIcon', styles.submenuIcon, item.submenuIconProps ? item.submenuIconProps.className : '') }))) : (null)));
};
ContextualMenu.prototype._renderIcon = function (item) {
// Only present to allow continued use of item.icon which is deprecated.
var iconProps = item.iconProps ? item.iconProps : {
iconName: 'CustomIcon',
className: item.icon ? 'ms-Icon--' + item.icon : ''
};
// Use the default icon color for the known icon names
var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-ContextualMenu-iconColor ' + styles.iconColor);
var iconClassName = Utilities_1.css('ms-ContextualMenu-icon', styles.icon, iconColorClassName, iconProps.className);
return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName }));
};
ContextualMenu.prototype._onKeyDown = function (ev) {
var submenuCloseKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.right : Utilities_1.KeyCodes.left;
if (ev.which === Utilities_1.KeyCodes.escape
|| ev.which === Utilities_1.KeyCodes.tab
|| (ev.which === submenuCloseKey && this.props.isSubMenu && this.props.arrowDirection === FocusZone_1.FocusZoneDirection.vertical)) {
// When a user presses escape, we will try to refocus the previous focused element.
this._isFocusingPreviousElement = true;
ev.preventDefault();
ev.stopPropagation();
this.dismiss(ev);
}
};
ContextualMenu.prototype._onItemMouseEnter = function (item, ev) {
var _this = this;
var targetElement = ev.currentTarget;
if (item.key !== this.state.expandedMenuItemKey) {
if (hasSubmenuItems(item)) {
this._enterTimerId = this._async.setTimeout(function () { return _this._onItemSubMenuExpand(item, targetElement); }, 500);
}
else {
this._enterTimerId = this._async.setTimeout(function () { return _this._onSubMenuDismiss(ev); }, 500);
}
}
};
ContextualMenu.prototype._onMouseLeave = function (ev) {
this._async.clearTimeout(this._enterTimerId);
};
ContextualMenu.prototype._onItemMouseDown = function (item, ev) {
if (item.onMouseDown) {
item.onMouseDown(item, ev);
}
};
ContextualMenu.prototype._onItemClick = function (item, ev) {
var items = getSubmenuItems(item);
if (!items || !items.length) {
this._executeItemClick(item, ev);
}
else {
if (item.key === this.state.expandedMenuItemKey) {
this._onSubMenuDismiss(ev);
}
else {
this._onItemSubMenuExpand(item, ev.currentTarget);
}
}
ev.stopPropagation();
ev.preventDefault();
};
ContextualMenu.prototype._onAnchorClick = function (item, ev) {
this._executeItemClick(item, ev);
ev.stopPropagation();
};
ContextualMenu.prototype._executeItemClick = function (item, ev) {
if (item.onClick) {
item.onClick(ev, item);
}
else if (this.props.onItemClick) {
this.props.onItemClick(ev, item);
}
this.dismiss(ev, true);
};
ContextualMenu.prototype._onItemKeyDown = function (item, ev) {
var openKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.left : Utilities_1.KeyCodes.right;
if (ev.which === openKey) {
this._onItemSubMenuExpand(item, ev.currentTarget);
ev.preventDefault();
}
};
ContextualMenu.prototype._onItemSubMenuExpand = function (item, target) {
if (this.state.expandedMenuItemKey !== item.key) {
if (this.state.submenuProps) {
this._onSubMenuDismiss();
}
var submenuProps = {
items: getSubmenuItems(item),
target: target,
onDismiss: this._onSubMenuDismiss,
isSubMenu: true,
id: this.state.subMenuId,
shouldFocusOnMount: true,
directionalHint: Utilities_1.getRTL() ? DirectionalHint_1.DirectionalHint.leftTopEdge : DirectionalHint_1.DirectionalHint.rightTopEdge,
className: this.props.className,
gapSpace: 0
};
if (item.subMenuProps) {
Utilities_1.assign(submenuProps, item.subMenuProps);
}
this.setState({
expandedMenuItemKey: item.key,
submenuProps: submenuProps,
});
}
};
ContextualMenu.prototype._onSubMenuDismiss = function (ev, dismissAll) {
if (dismissAll) {
this.dismiss(ev, dismissAll);
}
else {
this.setState({
dismissedMenuItemKey: this.state.expandedMenuItemKey,
expandedMenuItemKey: null,
submenuProps: null
});
}
};
ContextualMenu.prototype._setTargetWindowAndElement = function (target) {
if (target) {
if (typeof target === 'string') {
var currentDoc = Utilities_1.getDocument();
this._target = currentDoc ? currentDoc.querySelector(target) : null;
this._targetWindow = Utilities_1.getWindow();
}
else if (target.stopPropagation) {
this._target = target;
this._targetWindow = Utilities_1.getWindow(target.toElement);
}
else {
var targetElement = target;
this._target = target;
this._targetWindow = Utilities_1.getWindow(targetElement);
}
}
else {
this._targetWindow = Utilities_1.getWindow();
}
};
return ContextualMenu;
}(Utilities_1.BaseComponent));
// The default ContextualMenu properities have no items and beak, the default submenu direction is right and top.
ContextualMenu.defaultProps = {
items: [],
shouldFocusOnMount: true,
isBeakVisible: false,
gapSpace: 0,
directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge,
beakWidth: 16,
arrowDirection: FocusZone_1.FocusZoneDirection.vertical,
};
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "dismiss", null);
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "_onKeyDown", null);
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "_onMouseLeave", null);
__decorate([
Utilities_1.autobind
], ContextualMenu.prototype, "_onSubMenuDismiss", null);
exports.ContextualMenu = ContextualMenu;
//# sourceMappingURL=ContextualMenu.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_d02768e7',
list: 'list_d02768e7',
item: 'item_d02768e7',
link: 'link_d02768e7',
isDisabled: 'isDisabled_d02768e7',
icon: 'icon_d02768e7',
isExpanded: 'isExpanded_d02768e7',
header: 'header_d02768e7',
linkContent: 'linkContent_d02768e7',
divider: 'divider_d02768e7',
iconColor: 'iconColor_d02768e7',
itemText: 'itemText_d02768e7',
submenuIcon: 'submenuIcon_d02768e7',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_d02768e7{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:180px}.list_d02768e7{list-style-type:none;margin:0;padding:0;line-height:0}.item_d02768e7{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:36px;position:relative;box-sizing:border-box}.link_d02768e7{font:inherit;color:inherit;background:0 0;border:none;width:100%;height:36px;line-height:36px;display:block;cursor:pointer;padding:0 6px}.link_d02768e7::-moz-focus-inner{border:0}.link_d02768e7{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .link_d02768e7:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .link_d02768e7{text-align:left}html[dir=rtl] .link_d02768e7{text-align:right}.link_d02768e7:hover:not([disabled]){background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_d02768e7.isDisabled_d02768e7,.link_d02768e7[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.link_d02768e7.isDisabled_d02768e7 .icon_d02768e7,.link_d02768e7[disabled] .icon_d02768e7{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.is-focusVisible .link_d02768e7:focus{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_d02768e7.isExpanded_d02768e7,.link_d02768e7.isExpanded_d02768e7:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-weight:600}.header_d02768e7{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header_d02768e7::-moz-focus-inner{border:0}.header_d02768e7{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .header_d02768e7:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .header_d02768e7{text-align:left}html[dir=rtl] .header_d02768e7{text-align:right}a.link_d02768e7{padding:0 6px;text-rendering:auto;color:inherit;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-decoration:none;box-sizing:border-box}.linkContent_d02768e7{white-space:nowrap;height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%}.divider_d02768e7{display:block;height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";position:relative}.icon_d02768e7{display:inline-block;min-height:1px;max-height:36px;width:14px;margin:0 4px;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}.iconColor_d02768e7{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.itemText_d02768e7{margin:0 4px;vertical-align:middle;display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.submenuIcon_d02768e7{height:36px;line-height:36px;text-align:center;font-size:10px;display:inline-block;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ContextualMenu.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VisualTest_1 = require("../../common/VisualTest");
/* tslint:disable:no-function-expression */
casper.
start(VisualTest_1.baseUrl + 'contextualMenu').
then(function () {
phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_not_pressed');
}).then(function () {
this.mouse.move('#ContextualMenu');
phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_hovered');
}).then(function () {
this.mouse.down('#ContextualMenu');
phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_pressed');
});
casper.run(function () { casper.test.done(); });
/* tslint:enable:no-function-expression */
//# sourceMappingURL=ContextualMenu.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var ContextualMenu_Basic_Example_1 = require("./examples/ContextualMenu.Basic.Example");
var ContextualMenu_Checkmarks_Example_1 = require("./examples/ContextualMenu.Checkmarks.Example");
var ContextualMenu_Directional_Example_1 = require("./examples/ContextualMenu.Directional.Example");
var ContextualMenu_Customization_Example_1 = require("./examples/ContextualMenu.Customization.Example");
var ContextualMenu_Header_Example_1 = require("./examples/ContextualMenu.Header.Example");
var ContextualMenuBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx');
var ContextualMenuCheckmarksExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx');
var ContextualMenuDirectionalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx');
var ContextualMenuCustomizationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx');
var ContextualMenuHeaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx');
var ContextualMenuPage = (function (_super) {
__extends(ContextualMenuPage, _super);
function ContextualMenuPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ContextualMenuPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ContextualMenu', componentName: 'ContextualMenuExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu', code: ContextualMenuBasicExampleCode },
React.createElement(ContextualMenu_Basic_Example_1.ContextualMenuBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu checked menus example', code: ContextualMenuCheckmarksExampleCode },
React.createElement(ContextualMenu_Checkmarks_Example_1.ContextualMenuCheckmarksExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu beak/direction test', code: ContextualMenuDirectionalExampleCode },
React.createElement(ContextualMenu_Directional_Example_1.ContextualMenuDirectionalExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu customization example', code: ContextualMenuCustomizationExampleCode },
React.createElement(ContextualMenu_Customization_Example_1.ContextualMenuCustomizationExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ContextualMenu header example', code: ContextualMenuHeaderExampleCode },
React.createElement(ContextualMenu_Header_Example_1.ContextualMenuHeaderExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts'),
require('!raw-loader!office-ui-fabric-react/src/components/Callout/Callout.Props.ts'),
] }), overview: React.createElement("div", null,
React.createElement("p", null, "ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places."),
React.createElement("p", null, "There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons."),
React.createElement("p", null, "Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don\u2019t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use to display commands."),
React.createElement("li", null, "Divide groups of commands with rules."),
React.createElement("li", null, "Use selection checks without icons."),
React.createElement("li", null, "Provide submenus for sets of related commands that aren\u2019t as critical as others."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display content."),
React.createElement("li", null, "Show commands as one large group."),
React.createElement("li", null, "Mix checks and icons."),
React.createElement("li", null, "Create submenus of submenus."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/ContextualMenu/ContextualMenu.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ContextualMenuPage;
}(React.Component));
exports.ContextualMenuPage = ContextualMenuPage;
//# sourceMappingURL=ContextualMenuPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var ContextualMenuVPage = (function (_super) {
__extends(ContextualMenuVPage, _super);
function ContextualMenuVPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ContextualMenuVPage.prototype.render = function () {
return React.createElement("div", null,
React.createElement("div", null,
React.createElement(index_1.ContextualMenu, { id: 'ContextualMenu', shouldFocusOnMount: false, items: [{
key: 'new',
name: 'New',
icon: 'Add',
onClick: function () { return alert('New'); }
},
{
key: 'upload',
name: 'Upload',
icon: 'Upload',
onClick: function () { return alert('upload'); }
}] })));
};
return ContextualMenuVPage;
}(React.Component));
exports.default = ContextualMenuVPage;
//# sourceMappingURL=ContextualMenuPage.visualtest.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 6 6 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./ContextualMenu")); __export(require("./ContextualMenu.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DatePicker.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| DatePicker.js | 6.25% | (9 / 144) | 5.65% | (7 / 124) | 4% | (1 / 25) | 6.52% | (9 / 138) | |
| DatePicker.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DatePickerPage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=DatePicker.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Calendar_1 = require("../../Calendar");
var Callout_1 = require("../../Callout");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var TextField_1 = require("../../TextField");
var Utilities_1 = require("../../Utilities");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var styles = require("./DatePicker.scss");
var DEFAULT_STRINGS = {
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
shortMonths: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
shortDays: [
'S',
'M',
'T',
'W',
'T',
'F',
'S'
],
goToToday: 'Go to today',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year'
};
var DatePicker = (function (_super) {
__extends(DatePicker, _super);
function DatePicker(props) {
var _this = _super.call(this) || this;
var formatDate = props.formatDate, value = props.value;
_this.state = {
selectedDate: value || new Date(),
formattedDate: (formatDate && value) ? formatDate(value) : '',
isDatePickerShown: false,
errorMessage: null
};
_this._preventFocusOpeningPicker = false;
return _this;
}
DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value;
var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null;
// Set error message
this.setState({
errorMessage: errorMessage
});
// Issue# 1274: Check if the date value changed from old props value, i.e., if indeed a new date is being
// passed in or if the formatting function was modified. We only update the selected date if either of these
// had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this
// is the result of the onSelectDate callback, but this should be a rare scenario.
var oldValue = this.props.value;
if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) {
this.setState({
selectedDate: value || new Date(),
formattedDate: (formatDate && value) ? formatDate(value) : '',
});
}
};
DatePicker.prototype.render = function () {
var _this = this;
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput;
var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, errorMessage = _b.errorMessage;
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker', styles.root), ref: 'root' },
React.createElement("div", { ref: function (c) { return _this._datepicker = c; } },
React.createElement(TextField_1.TextField, { className: styles.textField, ariaLabel: ariaLabel, "aria-haspopup": 'true', required: isRequired, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, iconClass: Utilities_1.css('ms-Icon ms-Icon--Calendar', label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel), readOnly: !allowTextInput, value: formattedDate, ref: 'textField' })),
isDatePickerShown && (React.createElement(Callout_1.Callout, { isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, targetElement: this._datepicker, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned },
React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, value: selectedDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: this._resolveRef('_calendar') })))));
};
DatePicker.prototype._onSelectDate = function (date) {
var _a = this.props, formatDate = _a.formatDate, onSelectDate = _a.onSelectDate;
this.setState({
selectedDate: date,
isDatePickerShown: false,
formattedDate: formatDate && date ? formatDate(date) : '',
});
if (onSelectDate) {
onSelectDate(date);
}
};
;
DatePicker.prototype._onCalloutPositioned = function () {
this._calendar.focus();
};
DatePicker.prototype._onTextFieldFocus = function (ev) {
if (this.props.disableAutoFocus) {
return;
}
if (!this.props.allowTextInput) {
if (!this._preventFocusOpeningPicker) {
this._showDatePickerPopup();
}
else {
this._preventFocusOpeningPicker = false;
}
}
};
;
DatePicker.prototype._onTextFieldBlur = function (ev) {
this._validateTextInput();
};
;
DatePicker.prototype._onTextFieldChanged = function (newValue) {
if (this.props.allowTextInput) {
if (this.state.isDatePickerShown) {
this._dismissDatePickerPopup();
}
var _a = this.props, isRequired = _a.isRequired, value = _a.value, strings = _a.strings;
this.setState({
errorMessage: (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null,
formattedDate: newValue
});
}
};
DatePicker.prototype._onTextFieldKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
ev.preventDefault();
ev.stopPropagation();
if (!this.state.isDatePickerShown) {
this._showDatePickerPopup();
}
else {
// When DatePicker allows input date string directly,
// it is expected to hit another enter to close the popup
if (this.props.allowTextInput) {
this._dismissDatePickerPopup();
}
}
break;
case Utilities_1.KeyCodes.escape:
this._handleEscKey(ev);
break;
default:
break;
}
};
;
DatePicker.prototype._onTextFieldClick = function (ev) {
if (!this.state.isDatePickerShown) {
this._showDatePickerPopup();
}
else {
if (this.props.allowTextInput) {
this.setState({
isDatePickerShown: false
});
}
}
};
DatePicker.prototype._showDatePickerPopup = function () {
if (!this.state.isDatePickerShown) {
this._preventFocusOpeningPicker = true;
this._focusOnSelectedDateOnUpdate = true;
this.setState({
isDatePickerShown: true,
navigatedDate: this.state.selectedDate,
errorMessage: ''
});
}
};
DatePicker.prototype._dismissDatePickerPopup = function () {
if (this.state.isDatePickerShown) {
this.setState({
isDatePickerShown: false
});
this._validateTextInput();
}
};
/**
* Callback for closing the calendar callout
*/
DatePicker.prototype._calendarDismissed = function () {
this._preventFocusOpeningPicker = true;
this._dismissDatePickerPopup();
if (this.refs.textField) {
this.refs.textField.focus();
}
};
DatePicker.prototype._handleEscKey = function (ev) {
this._calendarDismissed();
};
DatePicker.prototype._validateTextInput = function () {
var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, formatDate = _a.formatDate, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate;
var inputValue = this.state.formattedDate;
// Do validation only if DatePicker's popup is dismissed
if (this.state.isDatePickerShown) {
return;
}
// Check when DatePicker is a required field but has NO input value
if (isRequired && !inputValue) {
this.setState({
// Since fabic react doesn't have loc support yet
// use the symbol '*' to represent error message
errorMessage: strings.isRequiredErrorMessage || '*'
});
return;
}
if (allowTextInput) {
var date = null;
if (inputValue) {
date = parseDateFromString(inputValue);
if (!date) {
this.setState({
errorMessage: strings.invalidInputErrorMessage || '*'
});
}
else {
this.setState({
selectedDate: date,
errorMessage: ''
});
}
}
else {
// No input date string shouldn't be an error if field is not required
this.setState({
errorMessage: ''
});
}
// Execute onSelectDate callback
if (onSelectDate) {
// If no input date string or input date string is invalid
// date variable will be null, callback should expect null value for this case
onSelectDate(date);
}
}
};
return DatePicker;
}(Utilities_1.BaseComponent));
DatePicker.defaultProps = {
allowTextInput: false,
formatDate: function (date) {
if (date) {
return date.toDateString();
}
return '';
},
parseDateFromString: function (dateStr) {
var date = Date.parse(dateStr);
if (date) {
return new Date(date);
}
return null;
},
firstDayOfWeek: Calendar_1.DayOfWeek.Sunday,
isRequired: false,
isMonthPickerVisible: true,
strings: DEFAULT_STRINGS
};
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onSelectDate", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onCalloutPositioned", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldFocus", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldBlur", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldChanged", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldKeyDown", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldClick", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_dismissDatePickerPopup", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_calendarDismissed", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_handleEscKey", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_validateTextInput", null);
exports.DatePicker = DatePicker;
//# sourceMappingURL=DatePicker.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_113f0f82',
textField: 'textField_113f0f82',
eventWithLabel: 'eventWithLabel_113f0f82',
eventWithoutLabel: 'eventWithoutLabel_113f0f82',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_113f0f82{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px}.textField_113f0f82{position:relative}.textField_113f0f82 input::-ms-clear{display:none}.textField_113f0f82 input[readonly]{cursor:pointer}.eventWithLabel_113f0f82{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;bottom:5px}html[dir=ltr] .eventWithLabel_113f0f82{right:9px}html[dir=rtl] .eventWithLabel_113f0f82{left:9px}.eventWithoutLabel_113f0f82{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;top:7px}html[dir=ltr] .eventWithoutLabel_113f0f82{right:9px}html[dir=rtl] .eventWithoutLabel_113f0f82{left:9px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=DatePicker.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var DatePicker_Basic_Example_1 = require("./examples/DatePicker.Basic.Example");
var DatePicker_Required_Example_1 = require("./examples/DatePicker.Required.Example");
var DatePicker_Input_Example_1 = require("./examples/DatePicker.Input.Example");
var DatePickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx');
var DatePickerRequiredExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx');
var DatePickerInputExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx');
var DatePickerPage = (function (_super) {
__extends(DatePickerPage, _super);
function DatePickerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DatePickerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DatePicker', componentName: 'DatePickerExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'DatePicker', code: DatePickerBasicExampleCode },
React.createElement(DatePicker_Basic_Example_1.DatePickerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DatePicker as required field', code: DatePickerRequiredExampleCode },
React.createElement(DatePicker_Required_Example_1.DatePickerRequiredExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DatePicker allows input date string', code: DatePickerInputExampleCode },
React.createElement(DatePicker_Input_Example_1.DatePickerInputExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/DatePicker.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The DatePicker component enables a user to pick a date value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the control as a single entity."),
React.createElement("li", null, "Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference)."),
React.createElement("li", null, "The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate."),
React.createElement("li", null, "When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px \u2013 wide). Plan your UI implementation accordingly."),
React.createElement("li", null, "The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar."),
React.createElement("li", null, "Don't attempt to force resize the control in any way."),
React.createElement("li", null, "Don't force the control to render one mode vs. the other (year or month/day)"),
React.createElement("li", null, "The flyout selector is a light dismiss control. Don't modify this behavior in any way."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/DatePicker/DatePicker.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return DatePickerPage;
}(React.Component));
exports.DatePickerPage = DatePickerPage;
//# sourceMappingURL=DatePickerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./DatePicker")); __export(require("../Calendar/Calendar.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DetailsHeader.js | 6.67% | (9 / 135) | 6.19% | (7 / 113) | 4.17% | (1 / 24) | 6.98% | (9 / 129) | |
| DetailsHeader.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DetailsList.Props.js | 100% | (19 / 19) | 100% | (8 / 8) | 100% | (4 / 4) | 100% | (19 / 19) | |
| DetailsList.js | 3.83% | (11 / 287) | 4.78% | (10 / 209) | 2.56% | (1 / 39) | 3.93% | (11 / 280) | |
| DetailsList.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DetailsListPage.js | 21.62% | (8 / 37) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 23.53% | (8 / 34) | |
| DetailsRow.js | 7.69% | (9 / 117) | 8.43% | (7 / 83) | 5% | (1 / 20) | 7.96% | (9 / 113) | |
| DetailsRow.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DetailsRowCheck.js | 33.33% | (3 / 9) | 0% | (0 / 2) | 0% | (0 / 1) | 33.33% | (3 / 9) | |
| DetailsRowFields.js | 17.78% | (8 / 45) | 14.29% | (4 / 28) | 7.69% | (1 / 13) | 19.05% | (8 / 42) | |
| index.js | 30% | (3 / 10) | 0% | (0 / 2) | 0% | (0 / 1) | 37.5% | (3 / 8) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var DetailsList_Props_1 = require("./DetailsList.Props");
var FocusZone_1 = require("../../FocusZone");
var Check_1 = require("../../Check");
var Icon_1 = require("../../Icon");
var Layer_1 = require("../../Layer");
var GroupSpacer_1 = require("../GroupedList/GroupSpacer");
var interfaces_1 = require("../../utilities/selection/interfaces");
var styles = require("./DetailsHeader.scss");
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
var INNER_PADDING = 16;
var SelectAllVisibility;
(function (SelectAllVisibility) {
SelectAllVisibility[SelectAllVisibility["none"] = 0] = "none";
SelectAllVisibility[SelectAllVisibility["hidden"] = 1] = "hidden";
SelectAllVisibility[SelectAllVisibility["visible"] = 2] = "visible";
})(SelectAllVisibility = exports.SelectAllVisibility || (exports.SelectAllVisibility = {}));
var DetailsHeader = (function (_super) {
__extends(DetailsHeader, _super);
function DetailsHeader(props) {
var _this = _super.call(this, props) || this;
_this.state = {
columnResizeDetails: null,
groupNestingDepth: _this.props.groupNestingDepth,
isAllCollapsed: _this.props.isAllCollapsed
};
_this._onToggleCollapseAll = _this._onToggleCollapseAll.bind(_this);
_this._onSelectAllClicked = _this._onSelectAllClicked.bind(_this);
return _this;
}
DetailsHeader.prototype.componentDidMount = function () {
var selection = this.props.selection;
this._events.on(selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
// We need to use native on this to avoid MarqueeSelection from handling the event before us.
this._events.on(this.refs.root, 'mousedown', this._onRootMouseDown);
};
DetailsHeader.prototype.componentWillReceiveProps = function (newProps) {
var groupNestingDepth = this.state.groupNestingDepth;
if (newProps.groupNestingDepth !== groupNestingDepth) {
this.setState({ groupNestingDepth: newProps.groupNestingDepth });
}
};
DetailsHeader.prototype.render = function () {
var _this = this;
var _a = this.props, columns = _a.columns, ariaLabel = _a.ariaLabel, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility;
var _b = this.state, isAllSelected = _b.isAllSelected, columnResizeDetails = _b.columnResizeDetails, isSizing = _b.isSizing, groupNestingDepth = _b.groupNestingDepth, isAllCollapsed = _b.isAllCollapsed;
return (React.createElement("div", { role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsHeader', styles.root, (_c = {},
_c['is-allSelected ' + styles.rootIsAllSelected] = isAllSelected,
_c['is-selectAllHidden ' + styles.rootIsSelectAllHidden] = selectAllVisibility === SelectAllVisibility.hidden,
_c['is-resizingColumn'] = !!columnResizeDetails && isSizing,
_c)), ref: 'root', onMouseMove: this._onRootMouseMove, "data-automationid": 'DetailsHeader' },
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal },
(selectAllVisibility !== SelectAllVisibility.none) ? (React.createElement("div", { className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader' },
React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell is-check', styles.cell, styles.cellIsCheck), onClick: this._onSelectAllClicked, "aria-label": ariaLabelForSelectAllCheckbox, "aria-pressed": isAllSelected },
React.createElement(Check_1.Check, { checked: isAllSelected })))) : null,
groupNestingDepth > 0 ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell), onClick: this._onToggleCollapseAll },
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-collapseButton', styles.collapseButton, isAllCollapsed && ('is-collapsed ' + styles.collapseButtonIsCollapsed)), iconName: 'ChevronDown' }))) : (null),
GroupSpacer_1.GroupSpacer({ count: groupNestingDepth - 1 }),
columns.map(function (column, columnIndex) {
return (React.createElement("div", { key: column.key, className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader', "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' },
React.createElement("button", { type: 'button', key: column.fieldName, disabled: column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.disabled, className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell, column.headerClassName, (_a = {},
_a['is-actionable ' + styles.cellIsActionable] = column.columnActionsMode !== DetailsList_Props_1.ColumnActionsMode.disabled,
_a['is-empty ' + styles.cellIsEmpty] = !column.name,
_a['is-icon-visible'] = column.isSorted || column.isGrouped || column.isFiltered,
_a)), style: { width: column.calculatedWidth + INNER_PADDING }, onClick: _this._onColumnClick.bind(_this, column), onContextMenu: _this._onColumnContextMenu.bind(_this, column), "aria-haspopup": column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown, "aria-label": column.ariaLabel || column.name, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key },
column.isFiltered && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'Filter' })),
column.isSorted && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),
column.isGrouped && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'GroupedDescending' })),
column.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(styles.nearIcon, column.iconClassName), iconName: column.iconName })),
column.name,
column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown && (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-filterChevron', styles.filterChevron), iconName: 'ChevronDown' }))),
(column.isResizable) && (React.createElement("div", { "data-sizer-index": columnIndex, className: Utilities_1.css('ms-DetailsHeader-cell is-sizer', styles.cell, styles.cellIsSizer, (_b = {},
_b['is-resizing ' + styles.cellIsResizing] = isSizing && columnResizeDetails.columnIndex === columnIndex,
_b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) }))));
var _a, _b;
})),
isSizing && (React.createElement(Layer_1.Layer, null,
React.createElement("div", { className: Utilities_1.css(isSizing && styles.sizingOverlay), onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));
var _c;
};
/** Set focus to the active thing in the focus area. */
DetailsHeader.prototype.focus = function () {
return this.refs.focusZone.focus();
};
/**
* double click on the column sizer will auto ajust column width
* to fit the longest content among current rendered rows.
*
* @private
* @param {number} columnIndex (index of the column user double clicked)
* @param {React.MouseEvent} ev (mouse double click event)
*/
DetailsHeader.prototype._onSizerDoubleClick = function (columnIndex, ev) {
var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, columns = _a.columns;
if (onColumnAutoResized) {
onColumnAutoResized(columns[columnIndex], columnIndex);
}
};
/**
* Called when the select all toggle is clicked.
*/
DetailsHeader.prototype._onSelectAllClicked = function () {
var selection = this.props.selection;
selection.toggleAllSelected();
};
DetailsHeader.prototype._onRootMouseDown = function (ev) {
var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
var columnIndex = Number(columnIndexAttr);
var columns = this.props.columns;
if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
// Ignore anything except the primary button.
return;
}
this.setState({
columnResizeDetails: {
columnIndex: columnIndex,
columnMinWidth: columns[columnIndex].calculatedWidth,
originX: ev.clientX
}
});
ev.preventDefault();
ev.stopPropagation();
};
DetailsHeader.prototype._onRootMouseMove = function (ev) {
var _a = this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
this.setState({ isSizing: true });
}
};
/**
* mouse move event handler in the header
* it will set isSizing state to true when user clicked on the sizer and move the mouse.
*
* @private
* @param {React.MouseEvent} ev (mouse move event)
*/
DetailsHeader.prototype._onSizerMouseMove = function (ev) {
var
// use buttons property here since ev.button in some edge case is not upding well during the move.
// but firefox doesn't support it, so we set the default value when it is not defined.
buttons = ev.buttons;
var _a = this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, columns = _a.columns;
var columnResizeDetails = this.state.columnResizeDetails;
if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
// cancel mouse down event and return early when the primary button is not pressed
this._onSizerMouseUp(ev);
return;
}
if (ev.clientX !== columnResizeDetails.originX) {
if (onColumnIsSizingChanged) {
onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
}
}
if (onColumnResized) {
var movement = ev.clientX - columnResizeDetails.originX;
if (Utilities_1.getRTL()) {
movement = -movement;
}
onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement);
}
};
/**
* mouse up event handler in the header
* clear the resize related state.
* This is to ensure we can catch double click event
*
* @private
* @param {React.MouseEvent} ev (mouse up event)
*/
DetailsHeader.prototype._onSizerMouseUp = function (ev) {
var _a = this.props, columns = _a.columns, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;
var columnResizeDetails = this.state.columnResizeDetails;
this.setState({
columnResizeDetails: null,
isSizing: false
});
if (onColumnIsSizingChanged) {
onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);
}
};
DetailsHeader.prototype._onSelectionChanged = function () {
var isAllSelected = this.props.selection.isAllSelected();
if (this.state.isAllSelected !== isAllSelected) {
this.setState({
isAllSelected: isAllSelected
});
}
};
DetailsHeader.prototype._onColumnClick = function (column, ev) {
var onColumnClick = this.props.onColumnClick;
if (column.onColumnClick) {
column.onColumnClick(ev, column);
}
if (onColumnClick) {
onColumnClick(ev, column);
}
};
DetailsHeader.prototype._onColumnContextMenu = function (column, ev) {
var onColumnContextMenu = this.props.onColumnContextMenu;
if (column.onContextMenu) {
column.onColumnContextMenu(column, ev);
}
if (onColumnContextMenu) {
onColumnContextMenu(column, ev);
}
};
DetailsHeader.prototype._onToggleCollapseAll = function () {
var onToggleCollapseAll = this.props.onToggleCollapseAll;
var newCollapsed = !this.state.isAllCollapsed;
this.setState({
isAllCollapsed: newCollapsed
});
if (onToggleCollapseAll) {
onToggleCollapseAll(newCollapsed);
}
};
return DetailsHeader;
}(Utilities_1.BaseComponent));
DetailsHeader.defaultProps = {
isSelectAllVisible: SelectAllVisibility.visible
};
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onSelectAllClicked", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onRootMouseDown", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onRootMouseMove", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onSizerMouseMove", null);
__decorate([
Utilities_1.autobind
], DetailsHeader.prototype, "_onSizerMouseUp", null);
exports.DetailsHeader = DetailsHeader;
//# sourceMappingURL=DetailsHeader.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_0faa994f',
rootIsSelectAllHidden: 'rootIsSelectAllHidden_0faa994f',
cell: 'cell_0faa994f',
cellIsCheck: 'cellIsCheck_0faa994f',
rootIsAllSelected: 'rootIsAllSelected_0faa994f',
cellWrapper: 'cellWrapper_0faa994f',
cellIsActionable: 'cellIsActionable_0faa994f',
cellIsSizer: 'cellIsSizer_0faa994f',
cellIsEmpty: 'cellIsEmpty_0faa994f',
cellIsResizing: 'cellIsResizing_0faa994f',
collapseButton: 'collapseButton_0faa994f',
collapseButtonIsCollapsed: 'collapseButtonIsCollapsed_0faa994f',
nearIcon: 'nearIcon_0faa994f',
filterChevron: 'filterChevron_0faa994f',
sizingOverlay: 'sizingOverlay_0faa994f',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_0faa994f{display:inline-block;min-width:100%;vertical-align:top;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_0faa994f.rootIsSelectAllHidden_0faa994f .cell_0faa994f.cellIsCheck_0faa994f{visibility:hidden}.cell_0faa994f.cellIsCheck_0faa994f .ms-Check-background{opacity:0}.cell_0faa994f.cellIsCheck_0faa994f:hover .ms-Check-background,.root_0faa994f.rootIsAllSelected_0faa994f .ms-Check-background{opacity:1}.cellWrapper_0faa994f{display:inline-block;position:relative}.cell_0faa994f{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;background:0 0;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";font-weight:400;position:relative;display:inline-block;box-sizing:border-box;padding:0 8px;border:none;line-height:inherit;margin:0;height:36px;vertical-align:top;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cell_0faa994f::-moz-focus-inner{border:0}.cell_0faa994f{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .cell_0faa994f:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .cell_0faa994f{text-align:left}html[dir=rtl] .cell_0faa994f{text-align:right}html[dir=ltr] .cell_0faa994f{text-align:left}html[dir=rtl] .cell_0faa994f{text-align:right}.cell_0faa994f.cellIsCheck_0faa994f{position:relative;padding:6px;margin:0}.cell_0faa994f.cellIsActionable_0faa994f{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.cell_0faa994f.cellIsActionable_0faa994f:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.cell_0faa994f.cellIsActionable_0faa994f:active{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.cell_0faa994f.cellIsSizer_0faa994f{position:absolute;width:16px;cursor:ew-resize;bottom:0;top:0;height:inherit;background:0 0}html[dir=ltr] .cell_0faa994f.cellIsSizer_0faa994f{margin-left:-10px}html[dir=rtl] .cell_0faa994f.cellIsSizer_0faa994f{margin-right:-10px}.cell_0faa994f.cellIsEmpty_0faa994f{text-overflow:clip}.cell_0faa994f.cellIsSizer_0faa994f:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";opacity:0}.cell_0faa994f.cellIsSizer_0faa994f.cellIsResizing_0faa994f:after,.cell_0faa994f.cellIsSizer_0faa994f:hover:after{opacity:1;transition:opacity .3s linear}.collapseButton_0faa994f{text-align:center;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear;width:20px;outline:0}.collapseButton_0faa994f.collapseButtonIsCollapsed_0faa994f{-webkit-transform:rotate(0);transform:rotate(0)}.cell_0faa994f .nearIcon_0faa994f{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";opacity:1}html[dir=ltr] .cell_0faa994f .nearIcon_0faa994f{padding-right:4px}html[dir=rtl] .cell_0faa994f .nearIcon_0faa994f{padding-left:4px}.cell_0faa994f .filterChevron_0faa994f{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";vertical-align:middle}html[dir=ltr] .cell_0faa994f .filterChevron_0faa994f{padding-left:4px}html[dir=rtl] .cell_0faa994f .filterChevron_0faa994f{padding-right:4px}.sizingOverlay_0faa994f{position:absolute;left:0;top:0;right:0;bottom:0;cursor:ew-resize;background:rgba(255,255,255,0)}html[dir=ltr] .cell_0faa994f .collapseButton_0faa994f{padding-right:0}html[dir=rtl] .cell_0faa994f .collapseButton_0faa994f{padding-left:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=DetailsHeader.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Enum to describe how a particular column header behaves.... This enum is used to
* to specify the property IColumn:columnActionsMode.
* If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable
*/
var ColumnActionsMode;
(function (ColumnActionsMode) {
/**
* Renders the column header as disabled.
*/
ColumnActionsMode[ColumnActionsMode["disabled"] = 0] = "disabled";
/**
* Renders the column header is clickable.
*/
ColumnActionsMode[ColumnActionsMode["clickable"] = 1] = "clickable";
/**
* Renders the column header ias clickable and displays the dropdown cheveron.
*/
ColumnActionsMode[ColumnActionsMode["hasDropdown"] = 2] = "hasDropdown";
})(ColumnActionsMode = exports.ColumnActionsMode || (exports.ColumnActionsMode = {}));
var ConstrainMode;
(function (ConstrainMode) {
/** If specified, lets the content grow which allows the page to manage scrolling. */
ConstrainMode[ConstrainMode["unconstrained"] = 0] = "unconstrained";
/**
* If specified, constrains the list to the given layout space.
*/
ConstrainMode[ConstrainMode["horizontalConstrained"] = 1] = "horizontalConstrained";
})(ConstrainMode = exports.ConstrainMode || (exports.ConstrainMode = {}));
var DetailsListLayoutMode;
(function (DetailsListLayoutMode) {
/**
* Lets the user resize columns and makes not attempt to fit them.
*/
DetailsListLayoutMode[DetailsListLayoutMode["fixedColumns"] = 0] = "fixedColumns";
/**
* Manages which columns are visible, tries to size them according to their min/max rules and drops
* off columns that can't fit and have isCollapsable set.
*/
DetailsListLayoutMode[DetailsListLayoutMode["justified"] = 1] = "justified";
})(DetailsListLayoutMode = exports.DetailsListLayoutMode || (exports.DetailsListLayoutMode = {}));
var CheckboxVisibility;
(function (CheckboxVisibility) {
/**
* Visible on hover.
*/
CheckboxVisibility[CheckboxVisibility["onHover"] = 0] = "onHover";
/**
* Visible always.
*/
CheckboxVisibility[CheckboxVisibility["always"] = 1] = "always";
/**
* Hide checkboxes.
*/
CheckboxVisibility[CheckboxVisibility["hidden"] = 2] = "hidden";
})(CheckboxVisibility = exports.CheckboxVisibility || (exports.CheckboxVisibility = {}));
//# sourceMappingURL=DetailsList.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 | 2 2 2 1 2 2 2 2 2 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var DetailsList_Props_1 = require("../DetailsList/DetailsList.Props");
var DetailsHeader_1 = require("../DetailsList/DetailsHeader");
var DetailsRow_1 = require("../DetailsList/DetailsRow");
var FocusZone_1 = require("../../FocusZone");
var GroupedList_1 = require("../../GroupedList");
var List_1 = require("../../List");
var withViewport_1 = require("../../utilities/decorators/withViewport");
var index_1 = require("../../utilities/selection/index");
var DragDropHelper_1 = require("../../utilities/dragdrop/DragDropHelper");
var styles = require("./DetailsList.scss");
var MIN_COLUMN_WIDTH = 100; // this is the global min width
var CHECKBOX_WIDTH = 36;
var GROUP_EXPAND_WIDTH = 36;
var DEFAULT_INNER_PADDING = 16;
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
var DetailsList = (function (_super) {
__extends(DetailsList, _super);
function DetailsList(props) {
var _this = _super.call(this, props) || this;
_this._activeRows = {};
_this._columnOverrides = {};
_this._onColumnIsSizingChanged = _this._onColumnIsSizingChanged.bind(_this);
_this._onColumnResized = _this._onColumnResized.bind(_this);
_this._onColumnAutoResized = _this._onColumnAutoResized.bind(_this);
_this._onRowDidMount = _this._onRowDidMount.bind(_this);
_this._onRowWillUnmount = _this._onRowWillUnmount.bind(_this);
_this._onToggleCollapse = _this._onToggleCollapse.bind(_this);
_this._onActiveRowChanged = _this._onActiveRowChanged.bind(_this);
_this._onHeaderKeyDown = _this._onHeaderKeyDown.bind(_this);
_this._onContentKeyDown = _this._onContentKeyDown.bind(_this);
_this._onRenderCell = _this._onRenderCell.bind(_this);
_this._onGroupExpandStateChanged = _this._onGroupExpandStateChanged.bind(_this);
_this.state = {
lastWidth: 0,
adjustedColumns: _this._getAdjustedColumns(props),
layoutMode: props.layoutMode,
isSizing: false,
isDropping: false,
isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed,
isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed
};
_this._selection = props.selection || new index_1.Selection({ onSelectionChanged: null, getKey: props.getKey });
_this._selection.setItems(props.items, false);
_this._dragDropHelper = props.dragDropEvents ? new DragDropHelper_1.DragDropHelper({
selection: _this._selection,
minimumPixelsForDrag: props.minimumPixelsForDrag
}) : null;
_this._initialFocusedIndex = props.initialFocusedIndex;
return _this;
}
DetailsList.prototype.componentWillUnmount = function () {
if (this._dragDropHelper) {
this._dragDropHelper.dispose();
}
};
DetailsList.prototype.componentDidUpdate = function (prevProps, prevState) {
if (this.props.onDidUpdate) {
this.props.onDidUpdate(this);
}
};
DetailsList.prototype.componentWillReceiveProps = function (newProps) {
var _a = this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, selectionMode = _a.selectionMode, columns = _a.columns, viewport = _a.viewport;
var layoutMode = this.state.layoutMode;
var shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
var shouldForceUpdates = false;
if (newProps.layoutMode !== this.props.layoutMode) {
layoutMode = newProps.layoutMode;
this.setState({ layoutMode: layoutMode });
shouldForceUpdates = true;
}
if (shouldResetSelection) {
this._initialFocusedIndex = newProps.initialFocusedIndex;
}
if (newProps.items !== items) {
this._selection.setItems(newProps.items, shouldResetSelection);
}
if (newProps.checkboxVisibility !== checkboxVisibility ||
newProps.columns !== columns ||
newProps.viewport.width !== viewport.width) {
shouldForceUpdates = true;
}
this._adjustColumns(newProps, true, layoutMode);
if (newProps.selectionMode !== selectionMode) {
shouldForceUpdates = true;
}
if (shouldForceUpdates) {
this._forceListUpdates();
}
};
DetailsList.prototype.render = function () {
var _this = this;
var _a = this.props, ariaLabelForListHeader = _a.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, className = _a.className, checkboxVisibility = _a.checkboxVisibility, constrainMode = _a.constrainMode, dragDropEvents = _a.dragDropEvents, groups = _a.groups, groupProps = _a.groupProps, items = _a.items, isHeaderVisible = _a.isHeaderVisible, onItemInvoked = _a.onItemInvoked, onItemContextMenu = _a.onItemContextMenu, onColumnHeaderClick = _a.onColumnHeaderClick, onColumnHeaderContextMenu = _a.onColumnHeaderContextMenu, selectionMode = _a.selectionMode, selectionPreservedOnEmptyClick = _a.selectionPreservedOnEmptyClick, ariaLabel = _a.ariaLabel, ariaLabelForGrid = _a.ariaLabelForGrid, rowElementEventMap = _a.rowElementEventMap, _b = _a.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = _a.getKey;
var _c = this.state, adjustedColumns = _c.adjustedColumns, isCollapsed = _c.isCollapsed, layoutMode = _c.layoutMode, isSizing = _c.isSizing, isSomeGroupExpanded = _c.isSomeGroupExpanded;
var _d = this, selection = _d._selection, dragDropHelper = _d._dragDropHelper;
var groupNestingDepth = this._getGroupNestingDepth();
var additionalListProps = {
renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND,
getKey: getKey
};
var selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none; // for SelectionMode.none
if (selectionMode === index_1.SelectionMode.single) {
selectAllVisibility = DetailsHeader_1.SelectAllVisibility.hidden;
}
if (selectionMode === index_1.SelectionMode.multiple) {
// if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups
var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;
if (isCollapsedGroupSelectVisible === undefined) {
isCollapsedGroupSelectVisible = true;
}
var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;
selectAllVisibility = isSelectAllVisible ? DetailsHeader_1.SelectAllVisibility.visible : DetailsHeader_1.SelectAllVisibility.hidden;
}
if (checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.hidden) {
selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none;
}
return (
// If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
// with JAWS.
React.createElement("div", __assign({ ref: 'root', className: Utilities_1.css('ms-DetailsList', styles.root, className, (_e = {
'is-fixed': layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns
},
_e['is-horizontalConstrained ' + styles.rootIsHorizontalConstrained] = constrainMode === DetailsList_Props_1.ConstrainMode.horizontalConstrained,
_e)), "data-automationid": 'DetailsList', "data-is-scrollable": 'false', "aria-label": ariaLabel }, (shouldApplyApplicationRole ? { role: 'application' } : {})),
React.createElement("div", { role: 'grid', "aria-label": ariaLabelForGrid },
React.createElement("div", { onKeyDown: this._onHeaderKeyDown, role: 'presentation' }, isHeaderVisible && (React.createElement(DetailsHeader_1.DetailsHeader, { ref: 'header', selectionMode: selectionMode, layoutMode: layoutMode, selection: selection, columns: adjustedColumns, onColumnClick: onColumnHeaderClick, onColumnContextMenu: onColumnHeaderContextMenu, onColumnResized: this._onColumnResized, onColumnIsSizingChanged: this._onColumnIsSizingChanged, onColumnAutoResized: this._onColumnAutoResized, groupNestingDepth: groupNestingDepth, isAllCollapsed: isCollapsed, onToggleCollapseAll: this._onToggleCollapse, ariaLabel: ariaLabelForListHeader, ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox, selectAllVisibility: selectAllVisibility }))),
React.createElement("div", { ref: 'contentContainer', onKeyDown: this._onContentKeyDown, role: 'presentation' },
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', className: styles.focusZone, direction: FocusZone_1.FocusZoneDirection.vertical, isInnerZoneKeystroke: function (ev) { return (ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)); }, onActiveElementChanged: this._onActiveRowChanged },
React.createElement(index_1.SelectionZone, { ref: 'selectionZone', selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu }, groups ? (React.createElement(GroupedList_1.GroupedList, { groups: groups, groupProps: groupProps, items: items, onRenderCell: this._onRenderCell, selection: selection, selectionMode: selectionMode, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: this._onGroupExpandStateChanged, ref: 'groupedList' })) : (React.createElement(List_1.List, __assign({ role: null, items: items, onRenderCell: function (item, itemIndex) { return _this._onRenderCell(0, item, itemIndex); } }, additionalListProps, { ref: 'list' })))))))));
var _e;
};
DetailsList.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this._forceListUpdates();
};
DetailsList.prototype._onRenderRow = function (props, defaultRender) {
return React.createElement(DetailsRow_1.DetailsRow, __assign({}, props));
};
DetailsList.prototype._onRenderCell = function (nestingDepth, item, index) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.rowElementEventMap, onRenderMissingItem = _a.onRenderMissingItem, onRenderItemColumn = _a.onRenderItemColumn, _b = _a.onRenderRow, onRenderRow = _b === void 0 ? this._onRenderRow : _b, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel;
var selection = this._selection;
var dragDropHelper = this._dragDropHelper;
var columns = this.state.adjustedColumns;
if (!item) {
if (onRenderMissingItem) {
onRenderMissingItem(index);
}
return null;
}
return onRenderRow({
item: item,
itemIndex: index,
columns: columns,
groupNestingDepth: nestingDepth,
selectionMode: selectionMode,
selection: selection,
onDidMount: this._onRowDidMount,
onWillUnmount: this._onRowWillUnmount,
onRenderItemColumn: onRenderItemColumn,
eventsToRegister: eventsToRegister,
dragDropEvents: dragDropEvents,
dragDropHelper: dragDropHelper,
viewport: viewport,
checkboxVisibility: checkboxVisibility,
getRowAriaLabel: getRowAriaLabel,
checkButtonAriaLabel: checkButtonAriaLabel
}, this._onRenderRow);
};
DetailsList.prototype._onGroupExpandStateChanged = function (isSomeGroupExpanded) {
this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });
};
DetailsList.prototype._onColumnIsSizingChanged = function (column, isSizing) {
this.setState({ isSizing: isSizing });
};
DetailsList.prototype._onHeaderKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.down) {
if (this.refs.focusZone && this.refs.focusZone.focus()) {
ev.preventDefault();
ev.stopPropagation();
}
}
};
DetailsList.prototype._onContentKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.up) {
if (this.refs.header && this.refs.header.focus()) {
ev.preventDefault();
ev.stopPropagation();
}
}
};
DetailsList.prototype._getGroupNestingDepth = function () {
var groups = this.props.groups;
var level = 0;
var groupsInLevel = groups;
while (groupsInLevel && groupsInLevel.length > 0) {
level++;
groupsInLevel = groupsInLevel[0].children;
}
return level;
};
DetailsList.prototype._onRowDidMount = function (row) {
var onRowDidMount = this.props.onRowDidMount;
var index = row.props.itemIndex;
this._activeRows[index] = row; // this is used for column auto resize
// Set focus to the row if it should receive focus.
if (this._initialFocusedIndex !== undefined && index === this._initialFocusedIndex) {
if (this.refs.selectionZone) {
this.refs.selectionZone.ignoreNextFocus();
}
row.focus();
delete this._initialFocusedIndex;
}
if (onRowDidMount) {
onRowDidMount(row.props.item, index);
}
};
DetailsList.prototype._onRowWillUnmount = function (row) {
var onRowWillUnmount = this.props.onRowWillUnmount;
var index = row.props.itemIndex;
delete this._activeRows[index];
this._events.off(row.refs.root);
if (onRowWillUnmount) {
onRowWillUnmount(row.props.item, index);
}
};
DetailsList.prototype._onToggleCollapse = function (collapsed) {
this.setState({
isCollapsed: collapsed
});
if (this.refs.groupedList) {
this.refs.groupedList.toggleCollapseAll(collapsed);
}
};
DetailsList.prototype._forceListUpdates = function () {
if (this.refs.groupedList) {
this.refs.groupedList.forceUpdate();
}
if (this.refs.list) {
this.refs.list.forceUpdate();
}
};
DetailsList.prototype._adjustColumns = function (newProps, forceUpdate, layoutMode) {
var adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, layoutMode);
var viewportWidth = this.props.viewport.width;
if (adjustedColumns) {
this.setState({
adjustedColumns: adjustedColumns,
lastWidth: viewportWidth,
layoutMode: layoutMode
});
}
};
/** Returns adjusted columns, given the viewport size and layout mode. */
DetailsList.prototype._getAdjustedColumns = function (newProps, forceUpdate, layoutMode) {
var _this = this;
var newColumns = newProps.columns, newItems = newProps.items, viewportWidth = newProps.viewport.width, selectionMode = newProps.selectionMode;
if (layoutMode === undefined) {
layoutMode = newProps.layoutMode;
}
var columns = this.props ? this.props.columns : [];
var lastWidth = this.state ? this.state.lastWidth : -1;
var lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined;
if (viewportWidth !== undefined) {
if (!forceUpdate &&
lastWidth === viewportWidth &&
lastSelectionMode === selectionMode &&
(!columns || newColumns === columns)) {
return;
}
}
else {
viewportWidth = this.props.viewport.width;
}
newColumns = newColumns || buildColumns(newItems, true);
var adjustedColumns;
if (layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns) {
adjustedColumns = this._getFixedColumns(newColumns);
}
else {
adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);
}
// Preserve adjusted column calculated widths.
adjustedColumns.forEach(function (column) {
var overrides = _this._columnOverrides[column.key] = _this._columnOverrides[column.key] || {};
overrides.calculatedWidth = column.calculatedWidth;
});
return adjustedColumns;
};
/** Builds a set of columns based on the given columns mixed with the current overrides. */
DetailsList.prototype._getFixedColumns = function (newColumns) {
var _this = this;
return newColumns.map(function (column) {
var newColumn = Utilities_1.assign({}, column, _this._columnOverrides[column.key]);
if (!newColumn.calculatedWidth) {
newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;
}
return newColumn;
});
};
/** Builds a set of columns to fix within the viewport width. */
DetailsList.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) {
var selectionMode = props.selectionMode, groups = props.groups;
var outerPadding = DEFAULT_INNER_PADDING;
var rowCheckWidth = (selectionMode !== index_1.SelectionMode.none) ? CHECKBOX_WIDTH : 0;
var groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
var totalWidth = 0; // offset because we have one less inner padding.
var availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
var adjustedColumns = newColumns.map(function (column, i) {
var newColumn = Utilities_1.assign({}, column, {
calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH
});
totalWidth += newColumn.calculatedWidth + (i > 0 ? DEFAULT_INNER_PADDING : 0);
return newColumn;
});
var lastIndex = adjustedColumns.length - 1;
// Remove collapsable columns.
while (lastIndex > 1 && totalWidth > availableWidth) {
var column = adjustedColumns[lastIndex];
if (column.isCollapsable) {
totalWidth -= column.calculatedWidth + DEFAULT_INNER_PADDING;
adjustedColumns.splice(lastIndex, 1);
}
lastIndex--;
}
// Then expand columns starting at the beginning, until we've filled the width.
for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {
var column = adjustedColumns[i];
var maxWidth = column.maxWidth;
var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;
var spaceLeft = availableWidth - totalWidth;
var increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;
// Add remaining space to the last column.
if (i === (adjustedColumns.length - 1)) {
increment = spaceLeft;
}
column.calculatedWidth += increment;
totalWidth += increment;
}
// Mark the last column as not resizable to avoid extra scrolling issues.
if (adjustedColumns.length) {
adjustedColumns[adjustedColumns.length - 1].isResizable = false;
}
return adjustedColumns;
};
DetailsList.prototype._onColumnResized = function (resizingColumn, newWidth) {
var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
if (this.props.onColumnResize) {
this.props.onColumnResize(resizingColumn, newCalculatedWidth);
}
this._columnOverrides[resizingColumn.key].calculatedWidth = newCalculatedWidth;
this._adjustColumns(this.props, true, DetailsList_Props_1.DetailsListLayoutMode.fixedColumns);
this._forceListUpdates();
};
/**
* Callback function when double clicked on the details header column resizer
* which will measure the column cells of all the active rows and resize the
* column to the max cell width.
*
* @private
* @param {IColumn} column (double clicked column definition)
* @param {number} columnIndex (double clicked column index)
* @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
*/
DetailsList.prototype._onColumnAutoResized = function (column, columnIndex) {
var _this = this;
var max = 0;
var count = 0;
var totalCount = Object.keys(this._activeRows).length;
for (var key in this._activeRows) {
if (this._activeRows.hasOwnProperty(key)) {
var currentRow = this._activeRows[key];
currentRow.measureCell(columnIndex, function (width) {
max = Math.max(max, width);
count++;
if (count === totalCount) {
_this._onColumnResized(column, max);
}
});
}
}
};
/**
* Call back function when an element in FocusZone becomes active. It will transalate it into item
* and call onActiveItemChanged callback if specified.
*
* @private
* @param {el} row element that became active in Focus Zone
* @param {ev} focus event from Focus Zone
*/
DetailsList.prototype._onActiveRowChanged = function (el, ev) {
var _a = this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged;
if (!onActiveItemChanged || !el) {
return;
}
var index = Number(el.getAttribute('data-item-index'));
if (index >= 0) {
onActiveItemChanged(items[index], index, ev);
}
};
;
return DetailsList;
}(Utilities_1.BaseComponent));
DetailsList.defaultProps = {
layoutMode: DetailsList_Props_1.DetailsListLayoutMode.justified,
selectionMode: index_1.SelectionMode.multiple,
constrainMode: DetailsList_Props_1.ConstrainMode.horizontalConstrained,
checkboxVisibility: DetailsList_Props_1.CheckboxVisibility.onHover,
isHeaderVisible: true
};
__decorate([
Utilities_1.autobind
], DetailsList.prototype, "_onRenderRow", null);
DetailsList = __decorate([
withViewport_1.withViewport
], DetailsList);
exports.DetailsList = DetailsList;
function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline) {
var columns = [];
if (items && items.length) {
var firstItem = items[0];
var isFirstColumn = true;
for (var propName in firstItem) {
if (firstItem.hasOwnProperty(propName)) {
columns.push({
key: propName,
name: propName,
fieldName: propName,
minWidth: MIN_COLUMN_WIDTH,
maxWidth: 300,
isCollapsable: !!columns.length,
isMultiline: (isMultiline === undefined) ? false : isMultiline,
isSorted: sortedColumnKey === propName,
isSortedDescending: !!isSortedDescending,
isRowHeader: false,
columnActionsMode: DetailsList_Props_1.ColumnActionsMode.clickable,
isResizable: canResizeColumns,
onColumnClick: onColumnClick,
isGrouped: groupedColumnKey === propName
});
isFirstColumn = false;
}
}
}
return columns;
}
exports.buildColumns = buildColumns;
//# sourceMappingURL=DetailsList.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_a5b97522',
focusZone: 'focusZone_a5b97522',
rootIsHorizontalConstrained: 'rootIsHorizontalConstrained_a5b97522',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_a5b97522{position:relative;font-size:12px}.focusZone_a5b97522{display:inline-block;vertical-align:top;min-width:100%;min-height:1px}.rootIsHorizontalConstrained_a5b97522{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.root_a5b97522 .ms-List-cell{min-height:38px;word-break:break-word}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=DetailsList.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var example_app_base_1 = require("@uifabric/example-app-base");
var DetailsList_Basic_Example_1 = require("./examples/DetailsList.Basic.Example");
var DetailsListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
var DetailsList_CustomColumns_Example_1 = require("./examples/DetailsList.CustomColumns.Example");
var DetailsListCustomColumnsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx');
var DetailsList_CustomRows_Example_1 = require("./examples/DetailsList.CustomRows.Example");
var DetailsListCustomRowsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx');
var DetailsList_CustomGroupHeaders_Example_1 = require("./examples/DetailsList.CustomGroupHeaders.Example");
var DetailsListCustomGroupHeadersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx');
var DetailsList_Advanced_Example_1 = require("./examples/DetailsList.Advanced.Example");
var DetailsListAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx');
var DetailsList_Grouped_Example_1 = require("./examples/DetailsList.Grouped.Example");
var DetailsListGroupedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx');
var DetailsList_DragDrop_Example_1 = require("./examples/DetailsList.DragDrop.Example");
var DetailsListDragDropExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx');
var DetailsListPage = (function (_super) {
__extends(DetailsListPage, _super);
function DetailsListPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DetailsListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DetailsList', componentName: 'DetailsListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListBasicExampleCode },
React.createElement(DetailsList_Basic_Example_1.DetailsListBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Grouped DetailsList', isOptIn: true, code: DetailsListGroupedExampleCode },
React.createElement(DetailsList_Grouped_Example_1.DetailsListGroupedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item columns with sorting', isOptIn: true, code: DetailsListCustomColumnsExampleCode },
React.createElement(DetailsList_CustomColumns_Example_1.DetailsListCustomColumnsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item rows', isOptIn: true, code: DetailsListCustomRowsExampleCode },
React.createElement(DetailsList_CustomRows_Example_1.DetailsListCustomRowsExample, null)),
",",
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom group headers', isOptIn: true, code: DetailsListCustomGroupHeadersExampleCode },
React.createElement(DetailsList_CustomGroupHeaders_Example_1.DetailsListCustomGroupHeadersExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Advanced DetailsList of 5000 items, variable row heights', isOptIn: true, code: DetailsListAdvancedExampleCode },
React.createElement(DetailsList_Advanced_Example_1.DetailsListAdvancedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Drag and Drop DetailsList with 10 items', isOptIn: true, code: DetailsListDragDropExampleCode },
React.createElement(DetailsList_DragDrop_Example_1.DetailsListDragDropExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null,
"DetailsList is a derivative of the ",
React.createElement(Link_1.Link, { href: '#/examples/list' }, "List"),
" component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse."),
React.createElement("p", null, "Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison."),
React.createElement("p", null, "DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column\u2019s data. If there are multiple lines of text in a column, consider the variable row height variant.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display content."),
React.createElement("li", null, "Provide useful columns of metadata."),
React.createElement("li", null, "Display columns in order of importance left to right or right to left depending on the standards of the culture."),
React.createElement("li", null, "Give columns ample default width to display information."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display commands or settings."),
React.createElement("li", null, "Overload the view with too many columns that require excessive horizontal scrolling."),
React.createElement("li", null, "Make columns so narrow that it truncates the information in typical cases."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return DetailsListPage;
}(React.Component));
exports.DetailsListPage = DetailsListPage;
//# sourceMappingURL=DetailsListPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var DetailsList_Props_1 = require("./DetailsList.Props");
var DetailsRowCheck_1 = require("./DetailsRowCheck");
var GroupSpacer_1 = require("../GroupedList/GroupSpacer");
var DetailsRowFields_1 = require("./DetailsRowFields");
var FocusZone_1 = require("../../FocusZone");
var interfaces_1 = require("../../utilities/selection/interfaces");
var styles = require("./DetailsRow.scss");
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var DetailsRow = (function (_super) {
__extends(DetailsRow, _super);
function DetailsRow(props) {
var _this = _super.call(this, props) || this;
_this.state = {
selectionState: _this._getSelectionState(props),
columnMeasureInfo: null,
isDropping: false,
groupNestingDepth: props.groupNestingDepth
};
_this._hasSetFocus = false;
_this._droppingClassNames = '';
_this._updateDroppingState = _this._updateDroppingState.bind(_this);
return _this;
}
DetailsRow.prototype.componentDidMount = function () {
var dragDropHelper = this.props.dragDropHelper;
if (dragDropHelper) {
this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions());
}
this._events.on(this.props.selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
if (this.props.onDidMount && this.props.item) {
// If the item appears later, we should wait for it before calling this method.
this._hasMounted = true;
this.props.onDidMount(this);
}
};
DetailsRow.prototype.componentDidUpdate = function (previousProps) {
var state = this.state;
var _a = this.props, item = _a.item, onDidMount = _a.onDidMount;
var columnMeasureInfo = state.columnMeasureInfo;
if (this.props.itemIndex !== previousProps.itemIndex ||
this.props.item !== previousProps.item ||
this.props.dragDropHelper !== previousProps.dragDropHelper) {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions());
}
}
if (columnMeasureInfo && columnMeasureInfo.index >= 0) {
var newWidth = this.refs.cellMeasurer.getBoundingClientRect().width;
columnMeasureInfo.onMeasureDone(newWidth);
this.setState({
columnMeasureInfo: null
});
}
if (item && onDidMount && !this._hasMounted) {
this._hasMounted = true;
onDidMount(this);
}
};
DetailsRow.prototype.componentWillUnmount = function () {
var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount;
// Only call the onWillUnmount callback if we have an item.
if (onWillUnmount && item) {
onWillUnmount(this);
}
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
};
DetailsRow.prototype.componentWillReceiveProps = function (newProps) {
this.setState({
selectionState: this._getSelectionState(newProps),
groupNestingDepth: newProps.groupNestingDepth
});
};
DetailsRow.prototype.render = function () {
var _a = this.props, columns = _a.columns, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, _b = _a.onRenderCheck, onRenderCheck = _b === void 0 ? this._onRenderCheck : _b, onRenderItemColumn = _a.onRenderItemColumn, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel, selection = _a.selection;
var _c = this.state, _d = _c.selectionState, isSelected = _d.isSelected, anySelected = _d.anySelected, columnMeasureInfo = _c.columnMeasureInfo, isDropping = _c.isDropping, groupNestingDepth = _c.groupNestingDepth;
var isDraggable = Boolean(dragDropEvents && dragDropEvents.canDrag && dragDropEvents.canDrag(item));
var droppingClassName = isDropping ? (this._droppingClassNames ? this._droppingClassNames : DEFAULT_DROPPING_CSS_CLASS) : '';
var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : null;
var canSelect = selection.canSelectItem(item);
var isContentUnselectable = selectionMode === interfaces_1.SelectionMode.multiple;
return (React.createElement("div", { ref: 'root', role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsRow ms-u-fadeIn400', styles.root, droppingClassName, (_e = {},
_e['is-contentUnselectable ' + styles.rootIsContentUnselectable] = isContentUnselectable,
_e['is-selected ' + styles.rootIsSelected] = isSelected,
_e['is-check-visible ' + styles.rootIsCheckVisible] = checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.always,
_e)), "data-is-focusable": true, "data-selection-index": itemIndex, "data-item-index": itemIndex, "data-is-draggable": isDraggable, draggable: isDraggable, "data-automationid": 'DetailsRow', style: { minWidth: viewport ? viewport.width : 0 }, "aria-selected": isSelected },
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
(selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_Props_1.CheckboxVisibility.hidden) && (React.createElement("span", { role: 'gridcell' }, onRenderCheck({
isSelected: isSelected,
anySelected: anySelected,
ariaLabel: checkButtonAriaLabel,
canSelect: canSelect
}))),
GroupSpacer_1.GroupSpacer({ count: groupNestingDepth }),
item && (React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: columns, item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn })),
columnMeasureInfo && (React.createElement("span", { className: Utilities_1.css('ms-DetailsRow-cellMeasurer ms-DetailsRow-cell', styles.cellMeasurer, styles.cell), ref: 'cellMeasurer' },
React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn }))))));
var _e;
};
/**
* measure cell at index. and call the call back with the measured cell width when finish measure
*
* @param {number} index (the cell index)
* @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
*/
DetailsRow.prototype.measureCell = function (index, onMeasureDone) {
var column = Utilities_1.assign({}, this.props.columns[index]);
column.minWidth = 0;
column.maxWidth = 999999;
delete column.calculatedWidth;
this.setState({
columnMeasureInfo: {
index: index,
column: column,
onMeasureDone: onMeasureDone
}
});
};
DetailsRow.prototype.focus = function () {
if (this.refs && this.refs.root) {
this.refs.root.tabIndex = 0;
this.refs.root.focus();
}
};
DetailsRow.prototype._onRenderCheck = function (props) {
return React.createElement(DetailsRowCheck_1.DetailsRowCheck, __assign({}, props));
};
DetailsRow.prototype._getSelectionState = function (props) {
var itemIndex = props.itemIndex, selection = props.selection;
return {
isSelected: selection.isIndexSelected(itemIndex),
anySelected: selection.getSelectedCount() > 0
};
};
DetailsRow.prototype._onSelectionChanged = function () {
var selectionState = this._getSelectionState(this.props);
if (!Utilities_1.shallowCompare(selectionState, this.state.selectionState)) {
this.setState({
selectionState: selectionState
});
}
};
DetailsRow.prototype._getRowDragDropOptions = function () {
var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
var options = {
eventMap: eventsToRegister,
selectionIndex: itemIndex,
context: { data: item, index: itemIndex },
canDrag: dragDropEvents.canDrag,
canDrop: dragDropEvents.canDrop,
onDragStart: dragDropEvents.onDragStart,
updateDropState: this._updateDroppingState,
onDrop: dragDropEvents.onDrop,
onDragEnd: dragDropEvents.onDragEnd,
};
return options;
};
/**
* update isDropping state based on the input value, which is used to change style during drag and drop
*
* when change to true, that means drag enter. we will add default dropping class name
* or the custom dropping class name (return result from onDragEnter) to the root elemet.
*
* when change to false, that means drag leave. we will remove the dropping class name from root element.
*
* @private
* @param {boolean} newValue (new isDropping state value)
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
*/
DetailsRow.prototype._updateDroppingState = function (newValue, event) {
var _a = this.state, selectionState = _a.selectionState, isDropping = _a.isDropping;
var _b = this.props, dragDropEvents = _b.dragDropEvents, item = _b.item;
if (!newValue) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(item, event);
}
}
else {
if (dragDropEvents.onDragEnter) {
this._droppingClassNames = dragDropEvents.onDragEnter(item, event);
}
}
if (isDropping !== newValue) {
this.setState({ selectionState: selectionState, isDropping: newValue });
}
};
return DetailsRow;
}(Utilities_1.BaseComponent));
exports.DetailsRow = DetailsRow;
//# sourceMappingURL=DetailsRow.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_9527382d',
rootIsSelected: 'rootIsSelected_9527382d',
rootIsContentUnselectable: 'rootIsContentUnselectable_9527382d',
cell: 'cell_9527382d',
isMultiline: 'isMultiline_9527382d',
fields: 'fields_9527382d',
check: 'check_9527382d',
checkDisabled: 'checkDisabled_9527382d',
rootIsCheckVisible: 'rootIsCheckVisible_9527382d',
cellMeasurer: 'cellMeasurer_9527382d',
checkSpacer: 'checkSpacer_9527382d',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_9527382d{display:inline-block;min-width:100%;min-height:36px;margin:1px 0;vertical-align:top;white-space:nowrap;padding:0;box-sizing:border-box;background:0 0;border:none;vertical-align:top;line-height:16px}.root_9527382d::-moz-focus-inner{border:0}.root_9527382d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_9527382d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_9527382d{text-align:left}html[dir=rtl] .root_9527382d{text-align:right}.root_9527382d:hover{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsSelected_9527382d{background:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.rootIsSelected_9527382d:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.rootIsContentUnselectable_9527382d{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.cell_9527382d{display:inline-block;position:relative;box-sizing:border-box;padding:10px 0;margin:0 8px;min-height:36px;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell_9527382d>button{max-width:100%}.isMultiline_9527382d{white-space:normal;word-break:break-word;text-overflow:clip}.fields_9527382d{display:inline-block}.check_9527382d{display:inline-block;cursor:default;padding:6px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;opacity:0}.check_9527382d::-moz-focus-inner{border:0}.check_9527382d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_9527382d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.checkDisabled_9527382d{visibility:hidden}.rootIsCheckVisible_9527382d .check_9527382d,.rootIsSelected_9527382d .check_9527382d,.root_9527382d:hover .check_9527382d{opacity:1}.cellMeasurer_9527382d .cell_9527382d{overflow:visible;white-space:nowrap}.checkSpacer_9527382d{display:inline-block;height:20px;width:20px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=DetailsRow.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Check_1 = require("../../Check");
var styles = require("./DetailsRow.scss");
exports.DetailsRowCheck = function (props) {
var selected = props.isSelected || props.selected;
return (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsRow-check', styles.check, (_a = {},
_a[styles.checkDisabled] = !props.canSelect,
_a['ms-DetailsRow-check--isDisabled'] = !props.canSelect,
_a)), role: 'button', "aria-pressed": selected, "data-selection-toggle": true, "data-automationid": 'DetailsRowCheck', "aria-label": props.ariaLabel },
React.createElement(Check_1.Check, { checked: selected })));
var _a;
};
//# sourceMappingURL=DetailsRowCheck.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./DetailsRow.scss");
var DetailsRowFields = (function (_super) {
__extends(DetailsRowFields, _super);
function DetailsRowFields(props) {
var _this = _super.call(this) || this;
_this.state = _this._getState(props);
return _this;
}
DetailsRowFields.prototype.componentWillReceiveProps = function (newProps) {
this.setState(this._getState(newProps));
};
DetailsRowFields.prototype.render = function () {
var columns = this.props.columns;
var cellContent = this.state.cellContent;
return (React.createElement("div", { className: Utilities_1.css('ms-DetailsRow-fields', styles.fields), "data-automationid": 'DetailsRowFields' }, columns.map(function (column, columnIndex) {
return (React.createElement("div", { key: columnIndex, role: column.isRowHeader ? 'rowheader' : 'gridcell', className: Utilities_1.css('ms-DetailsRow-cell', styles.cell, column.className, (_a = {
'is-multiline': column.isMultiline
},
_a[styles.isMultiline] = column.isMultiline,
_a)), style: { width: column.calculatedWidth }, "data-automationid": 'DetailsRowCell', "data-automation-key": column.key }, cellContent[columnIndex]));
var _a;
})));
};
DetailsRowFields.prototype._getState = function (props) {
var _this = this;
var item = props.item, itemIndex = props.itemIndex, onRenderItemColumn = props.onRenderItemColumn;
return {
cellContent: props.columns.map(function (column) {
var cellContent;
try {
var render = column.onRender || onRenderItemColumn;
cellContent = render ? render(item, itemIndex, column) : _this._getCellText(item, column);
}
catch (e) { }
return cellContent;
})
};
};
DetailsRowFields.prototype._getCellText = function (item, column) {
var value = (item && column && column.fieldName) ? item[column.fieldName] : '';
if (value === null || value === undefined) {
value = '';
}
return value;
};
return DetailsRowFields;
}(Utilities_1.BaseComponent));
exports.DetailsRowFields = DetailsRowFields;
//# sourceMappingURL=DetailsRowFields.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("../../utilities/selection/index")); __export(require("./DetailsList")); __export(require("./DetailsList.Props")); __export(require("./DetailsRow")); __export(require("./DetailsRowCheck")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Dialog.Props.js | 100% | (6 / 6) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (6 / 6) | |
| Dialog.js | 15.63% | (10 / 64) | 18.52% | (10 / 54) | 7.69% | (1 / 13) | 17.54% | (10 / 57) | |
| Dialog.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DialogFooter.js | 30.77% | (8 / 26) | 28.57% | (4 / 14) | 10% | (1 / 10) | 34.78% | (8 / 23) | |
| DialogPage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| index.js | 37.5% | (3 / 8) | 0% | (0 / 2) | 0% | (0 / 1) | 50% | (3 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DialogType;
(function (DialogType) {
/** Standard dialog */
DialogType[DialogType["normal"] = 0] = "normal";
/** Dialog with large header banner */
DialogType[DialogType["largeHeader"] = 1] = "largeHeader";
/** Dialog with an 'x' close button in the upper-right corner */
DialogType[DialogType["close"] = 2] = "close";
})(DialogType = exports.DialogType || (exports.DialogType = {}));
//# sourceMappingURL=Dialog.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Dialog_Props_1 = require("./Dialog.Props");
var Modal_1 = require("../../Modal");
var Button_1 = require("../../Button");
var DialogFooter_1 = require("./DialogFooter");
var withResponsiveMode_1 = require("../../utilities/decorators/withResponsiveMode");
var styles = require("./Dialog.scss");
var Dialog = (function (_super) {
__extends(Dialog, _super);
function Dialog(props) {
var _this = _super.call(this, props) || this;
_this.state = {
id: Utilities_1.getId('Dialog'),
};
return _this;
}
Dialog.prototype.render = function () {
var _a = this.props, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type;
var id = this.state.id;
var subTextContent;
var dialogClassName = Utilities_1.css(this.props.className, (_b = {},
_b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === Dialog_Props_1.DialogType.largeHeader,
_b['ms-Dialog--close ' + styles.isClose] = type === Dialog_Props_1.DialogType.close,
_b));
var containerClassName = Utilities_1.css(this.props.containerClassName, styles.main);
var groupings = this._groupChildren();
if (subText) {
subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText);
}
return (React.createElement(Modal_1.Modal, { className: dialogClassName, containerClassName: containerClassName, elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isBlocking: isBlocking, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, isDarkOverlay: isDarkOverlay, isOpen: isOpen, onDismiss: onDismiss, onDismissed: onDismissed, onLayerDidMount: onLayerDidMount, responsiveMode: responsiveMode, subtitleAriaId: subText && id + '-subText', titleAriaId: title && id + '-title' },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-header', styles.header) },
React.createElement("p", { className: Utilities_1.css('ms-Dialog-title', styles.title), id: id + '-title', role: 'heading' }, title),
React.createElement("div", { className: Utilities_1.css('ms-Dialog-topButton', styles.topButton) },
this.props.topButtonsProps.map(function (props) { return (React.createElement(Button_1.IconButton, __assign({}, props))); }),
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button, (_c = {}, _c[styles.isClose] = isBlocking || type === Dialog_Props_1.DialogType.largeHeader, _c)), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
React.createElement("div", { className: Utilities_1.css('ms-Dialog-inner', styles.inner) },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-content', styles.content, this.props.contentClassName) },
subTextContent,
groupings.contents),
groupings.footers)));
var _b, _c;
};
// @TODO - typing the footers as an array of DialogFooter is difficult because
// casing "child as DialogFooter" causes a problem because
// "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
Dialog.prototype._groupChildren = function () {
var groupings = {
footers: [],
contents: []
};
React.Children.map(this.props.children, function (child) {
if (typeof child === 'object' && child !== null && child.type === DialogFooter_1.DialogFooter) {
groupings.footers.push(child);
}
else {
groupings.contents.push(child);
}
});
return groupings;
};
return Dialog;
}(Utilities_1.BaseComponent));
Dialog.defaultProps = {
isOpen: false,
type: Dialog_Props_1.DialogType.normal,
isDarkOverlay: true,
isBlocking: false,
className: '',
containerClassName: '',
contentClassName: '',
topButtonsProps: []
};
Dialog = __decorate([
withResponsiveMode_1.withResponsiveMode
], Dialog);
exports.Dialog = Dialog;
//# sourceMappingURL=Dialog.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
isOpen: 'isOpen_f5c589e9',
main: 'main_f5c589e9',
button: 'button_f5c589e9',
isClose: 'isClose_f5c589e9',
inner: 'inner_f5c589e9',
header: 'header_f5c589e9',
title: 'title_f5c589e9',
topButton: 'topButton_f5c589e9',
content: 'content_f5c589e9',
subText: 'subText_f5c589e9',
actions: 'actions_f5c589e9',
actionsRight: 'actionsRight_f5c589e9',
action: 'action_f5c589e9',
isLargeHeader: 'isLargeHeader_f5c589e9',
isMultiline: 'isMultiline_f5c589e9',
};
load_themed_styles_1.loadStyles([{ "rawString": ".isOpen_f5c589e9{display:-webkit-box;display:-ms-flexbox;display:flex}.main_f5c589e9{width:288px}.button_f5c589e9.isClose_f5c589e9{display:none}.button_f5c589e9.isClose_f5c589e9 .ms-Icon.ms-Icon--Cancel{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:16px}.inner_f5c589e9{padding:0 28px 20px}.header_f5c589e9{position:relative;width:100%;box-sizing:border-box}.title_f5c589e9{margin:0;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:20px 36px 20px 28px}html[dir=rtl] .title_f5c589e9{padding:20px 28px 20px 36px}.topButton_f5c589e9{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;top:0;padding:12px 12px 0 0}html[dir=ltr] .topButton_f5c589e9{right:0}html[dir=rtl] .topButton_f5c589e9{left:0}html[dir=rtl] .topButton_f5c589e9{padding:12px 0 0 12px}.topButton_f5c589e9>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.content_f5c589e9{position:relative;width:100%}.content_f5c589e9 .ms-Button.ms-Button--compound{margin-bottom:20px}.content_f5c589e9 .ms-Button.ms-Button--compound:last-child{margin-bottom:0}.subText_f5c589e9{margin:0 0 20px 0;padding-top:8px;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:300;line-height:1.5}.actions_f5c589e9{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.actions_f5c589e9 .ms-Button{line-height:normal}.actionsRight_f5c589e9{font-size:0}html[dir=ltr] .actionsRight_f5c589e9{text-align:right}html[dir=rtl] .actionsRight_f5c589e9{text-align:left}html[dir=ltr] .actionsRight_f5c589e9{margin-right:-4px}html[dir=rtl] .actionsRight_f5c589e9{margin-left:-4px}.actionsRight_f5c589e9 .action_f5c589e9{margin:0 4px}.isClose_f5c589e9:not(.isLargeHeader_f5c589e9) .button_f5c589e9.isClose_f5c589e9{display:block}.isMultiline_f5c589e9 .title_f5c589e9{font-size:28px}.isMultiline_f5c589e9 .inner_f5c589e9{padding:0 20px 20px}.isLargeHeader_f5c589e9 .header_f5c589e9{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isLargeHeader_f5c589e9 .title_f5c589e9{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:28px;font-weight:100;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:26px 28px 28px;margin-bottom:8px}.isLargeHeader_f5c589e9 .subText_f5c589e9{font-size:14px}@media (min-width:480px){.main_f5c589e9{width:auto;min-width:288px;max-width:340px}}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Dialog.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./Dialog.scss");
var DialogFooter = (function (_super) {
__extends(DialogFooter, _super);
function DialogFooter() {
return _super !== null && _super.apply(this, arguments) || this;
}
DialogFooter.prototype.render = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-Dialog-actions', styles.actions) },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-actionsRight', styles.actionsRight) }, this._renderChildrenAsActions())));
};
DialogFooter.prototype._renderChildrenAsActions = function () {
return React.Children.map(this.props.children, function (child) {
return React.createElement("span", { className: Utilities_1.css('ms-Dialog-action', styles.action) }, child);
});
};
return DialogFooter;
}(Utilities_1.BaseComponent));
exports.DialogFooter = DialogFooter;
//# sourceMappingURL=DialogFooter.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Dialog_Basic_Example_1 = require("./examples/Dialog.Basic.Example");
var Dialog_LargeHeader_Example_1 = require("./examples/Dialog.LargeHeader.Example");
var Dialog_Blocking_Example_1 = require("./examples/Dialog.Blocking.Example");
var DialogBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx');
var DialogLargeHeaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx');
var DialogBlockingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx');
var DialogPage = (function (_super) {
__extends(DialogPage, _super);
function DialogPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DialogPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Dialog', componentName: 'DialogExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog', code: DialogBasicExampleCode },
React.createElement(Dialog_Basic_Example_1.DialogBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog Large Header', code: DialogLargeHeaderExampleCode },
React.createElement("p", null, "Use this Dialog sparingly, when calling extra attention to the content. It can be used in situations where you want to teach the user something or notify them of an important change."),
React.createElement(Dialog_LargeHeader_Example_1.DialogLargeHeaderExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog Blocking', code: DialogBlockingExampleCode },
React.createElement("p", null, "A blocking Dialog disables all other actions and commands on the page behind it. They should be used very sparingly, only when it is critical that the user makes a choice or provides information before they can proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks."),
React.createElement(Dialog_Blocking_Example_1.DialogBlockingExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Dialog/Dialog.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information."),
React.createElement("li", null, "When possible, try a non-blocking Dialog before resorting to a blocking Dialog."),
React.createElement("li", null, "Only include information needed to help users make a decision."),
React.createElement("li", null, "Button text should reflect the actions available to the user (e.g. save, delete)."),
React.createElement("li", null, "Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience."),
React.createElement("li", null, "Avoid \"Are you sure?\" or confirmation Dialogs unless the user is making an irreversible or destructive choice."),
React.createElement("li", null, "Do not use a blocking Dialog unless absolutely necessary because they are very disruptive."),
React.createElement("li", null, "Don\u2019t have long sentences or complicated choices."),
React.createElement("li", null, "Avoid generic button labels like \"Ok\" if you can be more specific about the action a user is about to complete. "),
React.createElement("li", null, "Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state."),
React.createElement("li", null, "Don't provide the user with more than 3 buttons."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Dialog/Dialog.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return DialogPage;
}(React.Component));
exports.DialogPage = DialogPage;
//# sourceMappingURL=DialogPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Dialog")); __export(require("./DialogFooter")); __export(require("./Dialog.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DocumentCard.Props.js | 100% | (5 / 5) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (5 / 5) | |
| DocumentCard.js | 17.54% | (10 / 57) | 10.61% | (7 / 66) | 8.33% | (1 / 12) | 19.61% | (10 / 51) | |
| DocumentCard.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DocumentCardActions.js | 27.27% | (9 / 33) | 29.17% | (7 / 24) | 10% | (1 / 10) | 31.03% | (9 / 29) | |
| DocumentCardActivity.js | 22.86% | (8 / 35) | 19.05% | (4 / 21) | 9.09% | (1 / 11) | 25% | (8 / 32) | |
| DocumentCardLocation.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| DocumentCardPage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| DocumentCardPreview.js | 15.52% | (9 / 58) | 13.46% | (7 / 52) | 8.33% | (1 / 12) | 17.65% | (9 / 51) | |
| DocumentCardTitle.js | 10.84% | (9 / 83) | 10.14% | (7 / 69) | 6.25% | (1 / 16) | 11.69% | (9 / 77) | |
| index.js | 25% | (3 / 12) | 0% | (0 / 2) | 0% | (0 / 1) | 30% | (3 / 10) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DocumentCardType;
(function (DocumentCardType) {
/**
* Standard DocumentCard.
*/
DocumentCardType[DocumentCardType["normal"] = 0] = "normal";
/**
* Compact layout. Displays the preview beside the details, rather than above.
*/
DocumentCardType[DocumentCardType["compact"] = 1] = "compact";
})(DocumentCardType = exports.DocumentCardType || (exports.DocumentCardType = {}));
//# sourceMappingURL=DocumentCard.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var DocumentCard_Props_1 = require("./DocumentCard.Props");
var Utilities_1 = require("../../Utilities");
var styles = require("./DocumentCard.scss");
var DocumentCard = (function (_super) {
__extends(DocumentCard, _super);
function DocumentCard() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCard.prototype.render = function () {
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, className = _a.className, type = _a.type, accentColor = _a.accentColor;
var actionable = (onClick || onClickHref) ? true : false;
// Override the border color if an accent color was provided (compact card only)
var style;
if (type === DocumentCard_Props_1.DocumentCardType.compact && accentColor) {
style = {
borderBottomColor: accentColor
};
}
// if this element is actionable it should have an aria role
var role = actionable ? (onClick ? 'button' : 'link') : null;
var tabIndex = actionable ? 0 : null;
return (React.createElement("div", { tabIndex: tabIndex, role: role, className: Utilities_1.css('ms-DocumentCard', styles.root, (_b = {},
_b['ms-DocumentCard--actionable ' + styles.rootIsActionable] = actionable,
_b['ms-DocumentCard--compact ' + styles.rootIsCompact] = type === DocumentCard_Props_1.DocumentCardType.compact ? true : false,
_b), className), onKeyDown: actionable ? this._onKeyDown : null, onClick: actionable ? this._onClick : null, style: style }, children));
var _b;
};
DocumentCard.prototype._onClick = function (ev) {
this._onAction(ev);
};
DocumentCard.prototype._onKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
this._onAction(ev);
}
};
DocumentCard.prototype._onAction = function (ev) {
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref;
if (onClick) {
onClick(ev);
}
else if (!onClick && onClickHref) {
// If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
window.location.href = onClickHref;
ev.preventDefault();
ev.stopPropagation();
}
};
return DocumentCard;
}(Utilities_1.BaseComponent));
DocumentCard.defaultProps = {
type: DocumentCard_Props_1.DocumentCardType.normal
};
__decorate([
Utilities_1.autobind
], DocumentCard.prototype, "_onClick", null);
__decorate([
Utilities_1.autobind
], DocumentCard.prototype, "_onKeyDown", null);
__decorate([
Utilities_1.autobind
], DocumentCard.prototype, "_onAction", null);
exports.DocumentCard = DocumentCard;
//# sourceMappingURL=DocumentCard.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_425a90a0',
rootIsActionable: 'rootIsActionable_425a90a0',
location: 'location_425a90a0',
title: 'title_425a90a0',
rootIsCompact: 'rootIsCompact_425a90a0',
preview: 'preview_425a90a0',
icon: 'icon_425a90a0',
activity: 'activity_425a90a0',
actions: 'actions_425a90a0',
action: 'action_425a90a0',
views: 'views_425a90a0',
activityIsMultiplePeople: 'activityIsMultiplePeople_425a90a0',
avatar: 'avatar_425a90a0',
activityDetails: 'activityDetails_425a90a0',
avatars: 'avatars_425a90a0',
name: 'name_425a90a0',
activityActivity: 'activityActivity_425a90a0',
previewIsFileList: 'previewIsFileList_425a90a0',
fileList: 'fileList_425a90a0',
fileListIcon: 'fileListIcon_425a90a0',
fileListMore: 'fileListMore_425a90a0',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_425a90a0{-webkit-font-smoothing:antialiased;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box;max-width:320px;min-width:206px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.rootIsActionable_425a90a0:hover{cursor:pointer;border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsActionable_425a90a0:hover:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";pointer-events:none}.location_425a90a0+.title_425a90a0{padding-top:4px}.rootIsCompact_425a90a0{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;max-width:480px;height:109px}.rootIsCompact_425a90a0 .ms-DocumentCard-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rootIsCompact_425a90a0 .preview_425a90a0{border-bottom:none;max-height:106px;max-width:144px}.rootIsCompact_425a90a0 .preview_425a90a0 .icon_425a90a0 .ms-Image-image{max-height:32px;max-width:32px}html[dir=ltr] .rootIsCompact_425a90a0 .preview_425a90a0{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .rootIsCompact_425a90a0 .preview_425a90a0{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.rootIsCompact_425a90a0 .title_425a90a0{padding:12px 16px 8px 16px;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;font-weight:400;line-height:16px}.rootIsCompact_425a90a0 .activity_425a90a0{padding-bottom:12px}.actions_425a90a0{height:34px;padding:4px 12px;position:relative}.action_425a90a0{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";cursor:pointer}html[dir=ltr] .action_425a90a0{float:left}html[dir=rtl] .action_425a90a0{float:right}html[dir=ltr] .action_425a90a0{margin-right:4px}html[dir=rtl] .action_425a90a0{margin-left:4px}.action_425a90a0 .ms-Button{font-size:16px;height:34px;width:34px}.action_425a90a0 .ms-Button:hover .ms-Button-icon{color:#1174c3;cursor:pointer}.views_425a90a0{line-height:34px}html[dir=ltr] .views_425a90a0{text-align:right}html[dir=rtl] .views_425a90a0{text-align:left}.views_425a90a0 .ms-Icon{font-size:16px;vertical-align:top}html[dir=ltr] .views_425a90a0 .ms-Icon{margin-right:4px}html[dir=rtl] .views_425a90a0 .ms-Icon{margin-left:4px}.activity_425a90a0{padding:8px 16px;position:relative}html[dir=ltr] .activityIsMultiplePeople_425a90a0 .avatar_425a90a0:nth-of-type(2){margin-left:-16px}html[dir=rtl] .activityIsMultiplePeople_425a90a0 .avatar_425a90a0:nth-of-type(2){margin-right:-16px}html[dir=ltr] .activityIsMultiplePeople_425a90a0 .activityDetails_425a90a0{left:72px}html[dir=rtl] .activityIsMultiplePeople_425a90a0 .activityDetails_425a90a0{right:72px}.avatars_425a90a0{height:32px}html[dir=ltr] .avatars_425a90a0{margin-left:-2px}html[dir=rtl] .avatars_425a90a0{margin-right:-2px}.avatar_425a90a0{display:inline-block;vertical-align:top;position:relative;text-align:center;width:32px;height:32px}.avatar_425a90a0:after{content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:2px solid #fafafa;border-radius:50%}.activityDetails_425a90a0{height:32px;position:absolute;top:8px;width:calc(100% - 72px)}html[dir=ltr] .activityDetails_425a90a0{left:56px}html[dir=rtl] .activityDetails_425a90a0{right:56px}.activityActivity_425a90a0,.name_425a90a0{display:block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name_425a90a0{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:600}.location_425a90a0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:block;padding:8px 16px;position:relative;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location_425a90a0:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";cursor:pointer}.preview_425a90a0{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";overflow:hidden}.preview_425a90a0.previewIsFileList_425a90a0{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.icon_425a90a0{bottom:10px;position:absolute}html[dir=ltr] .icon_425a90a0{left:10px}html[dir=rtl] .icon_425a90a0{right:10px}.fileList_425a90a0{padding:16px 16px 0 16px;list-style-type:none;margin:0}html[dir=rtl] .fileList_425a90a0{padding:16px 16px 0 16px}.fileList_425a90a0 li{height:16px;line-height:16px;margin-bottom:8px;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}html[dir=ltr] .fileList_425a90a0 li{padding-left:24px}html[dir=rtl] .fileList_425a90a0 li{padding-right:24px}.fileList_425a90a0 a{font-size:12px;text-decoration:none;color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.fileList_425a90a0 a:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.fileListIcon_425a90a0{position:absolute;top:0}html[dir=ltr] .fileListIcon_425a90a0{left:0}html[dir=rtl] .fileListIcon_425a90a0{right:0}.fileListMore_425a90a0{padding:0 16px 8px 16px;display:block;font-size:12px}html[dir=rtl] .fileListMore_425a90a0{padding:0 16px 8px 16px}.title_425a90a0{padding:8px 16px;display:block;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:38px;line-height:21px;overflow:hidden;word-wrap:break-word}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=DocumentCard.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var styles = require("./DocumentCard.scss");
var DocumentCardActions = (function (_super) {
__extends(DocumentCardActions, _super);
function DocumentCardActions() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardActions.prototype.render = function () {
var _a = this.props, actions = _a.actions, views = _a.views;
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions', styles.actions) },
actions && actions.map(function (action, index) {
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-action', styles.action), key: index },
React.createElement(Button_1.IconButton, __assign({}, action))));
}),
views > 0 && (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-views', styles.views) },
React.createElement("i", { className: 'ms-Icon ms-Icon--View' }),
views))));
};
return DocumentCardActions;
}(Utilities_1.BaseComponent));
exports.DocumentCardActions = DocumentCardActions;
//# sourceMappingURL=DocumentCardActions.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Persona_1 = require("../../Persona");
var styles = require("./DocumentCard.scss");
var DocumentCardActivity = (function (_super) {
__extends(DocumentCardActivity, _super);
function DocumentCardActivity() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardActivity.prototype.render = function () {
var _a = this.props, activity = _a.activity, people = _a.people;
return (people && people.length > 0 &&
React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity', styles.activity, (_b = {},
_b['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople] = people.length > 1,
_b)) },
this._renderAvatars(people),
React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-details', styles.activityDetails) },
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-name', styles.name) }, this._getNameString(people)),
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-activity', styles.activityActivity) }, activity))));
var _b;
};
DocumentCardActivity.prototype._renderAvatars = function (people) {
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatars', styles.avatars) },
people.length > 1 ? this._renderAvatar(people[1]) : null,
this._renderAvatar(people[0])));
};
DocumentCardActivity.prototype._renderAvatar = function (person) {
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatar', styles.avatar) },
React.createElement(Persona_1.Persona, { imageInitials: person.initials, primaryText: person.name, hidePersonaDetails: true, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, role: 'persentation', size: Persona_1.PersonaSize.extraSmall })));
};
DocumentCardActivity.prototype._getNameString = function (people) {
var nameString = people[0].name;
if (people.length >= 2) {
nameString += ' +' + (people.length - 1);
}
return nameString;
};
return DocumentCardActivity;
}(Utilities_1.BaseComponent));
exports.DocumentCardActivity = DocumentCardActivity;
//# sourceMappingURL=DocumentCardActivity.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./DocumentCard.scss");
var DocumentCardLocation = (function (_super) {
__extends(DocumentCardLocation, _super);
function DocumentCardLocation() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardLocation.prototype.render = function () {
var _a = this.props, location = _a.location, locationHref = _a.locationHref, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
return (React.createElement("a", { className: Utilities_1.css('ms-DocumentCardLocation', styles.location), href: locationHref, onClick: onClick, "aria-label": ariaLabel }, location));
};
return DocumentCardLocation;
}(Utilities_1.BaseComponent));
exports.DocumentCardLocation = DocumentCardLocation;
//# sourceMappingURL=DocumentCardLocation.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var DocumentCard_Basic_Example_1 = require("./examples/DocumentCard.Basic.Example");
var DocumentCard_Complete_Example_1 = require("./examples/DocumentCard.Complete.Example");
var DocumentCard_Compact_Example_1 = require("./examples/DocumentCard.Compact.Example");
var DocumentCardBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx');
var DocumentCardCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx');
var DocumentCardCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx');
var DocumentCardPage = (function (_super) {
__extends(DocumentCardPage, _super);
function DocumentCardPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DocumentCard', componentName: 'DocumentCardExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard Basic', code: DocumentCardBasicExampleCode },
React.createElement("p", null, "The default configuration for a card represents a single file, with space to denote the last significant event and the person involved."),
React.createElement(DocumentCard_Basic_Example_1.DocumentCardBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard Complete', code: DocumentCardCompleteExampleCode },
React.createElement("p", null, "This example shows a couple of optional abilities, including being able to have a card represent multiple items, being able to expose up to three relevant commands, and showing the number of views in the bottom right corner."),
React.createElement(DocumentCard_Complete_Example_1.DocumentCardCompleteExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard Compact Layout', code: DocumentCardCompactExampleCode },
React.createElement("p", null, "When showing a card on a mobile device or a similarly narrow layout, you may choose this Compact layout which helps the filename remain scannable while giving roomy space for a preview thumbnail."),
React.createElement(DocumentCard_Compact_Example_1.DocumentCardCompactExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/DocumentCard.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user\u2019s most trending document."),
React.createElement("li", null, "Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document\u2019s latest changes, or about the document\u2019s popularity, as you see fit."),
React.createElement("li", null, "Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata."),
React.createElement("li", null, "Don\u2019t use the DocumentCard if space is at a premium or you can\u2019t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like \u201CShare\u201D buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return DocumentCardPage;
}(React.Component));
exports.DocumentCardPage = DocumentCardPage;
//# sourceMappingURL=DocumentCardPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Image_1 = require("../../Image");
var Utilities_1 = require("../../Utilities");
var styles = require("./DocumentCard.scss");
var LIST_ITEM_COUNT = 3;
var DocumentCardPreview = (function (_super) {
__extends(DocumentCardPreview, _super);
function DocumentCardPreview() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentCardPreview.prototype.render = function () {
var previewImages = this.props.previewImages;
var style, preview;
var isFileList = false;
if (previewImages.length > 1) {
// Render a list of files
preview = this._renderPreviewList(previewImages);
isFileList = true;
}
else if (previewImages.length === 1) {
// Render a single preview
preview = this._renderPreviewImage(previewImages[0]);
// Override the border color if an accent color was provided
if (previewImages[0].accentColor) {
style = {
borderBottomColor: previewImages[0].accentColor
};
}
}
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)), style: style }, preview));
};
DocumentCardPreview.prototype._renderPreviewImage = function (previewImage) {
var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit;
var image = (React.createElement(Image_1.Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: 'presentation', alt: '' }));
var icon;
if (previewImage.iconSrc) {
icon = React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-icon', styles.icon), src: previewImage.iconSrc, role: 'presentation', alt: '' });
}
return (React.createElement("div", null,
image,
icon));
};
DocumentCardPreview.prototype._renderPreviewList = function (previewImages) {
var getOverflowDocumentCountText = this.props.getOverflowDocumentCountText;
// Determine how many documents we won't be showing
var overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
// Determine the overflow text that will be rendered after the preview list.
var overflowText = overflowDocumentCount ?
(getOverflowDocumentCountText ?
getOverflowDocumentCountText(overflowDocumentCount) :
'+' + overflowDocumentCount) : null;
// Create list items for the documents to be shown
var fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex },
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon), src: file.iconSrc, role: 'presentation', alt: '', width: '16px', height: '16px' }),
React.createElement("a", { href: file.url }, file.name))); });
return (React.createElement("div", null,
React.createElement("ul", { className: Utilities_1.css('ms-DocumentCardPreview-fileList', styles.fileList) }, fileListItems),
overflowText &&
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }, overflowText)));
};
return DocumentCardPreview;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], DocumentCardPreview.prototype, "_renderPreviewList", null);
exports.DocumentCardPreview = DocumentCardPreview;
//# sourceMappingURL=DocumentCardPreview.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var styles = require("./DocumentCard.scss");
var TRUNCATION_SEPARATOR = '…';
var TRUNCATION_MINIMUM_LENGTH = 40; // This is the length we know can fit into the min width of DocumentCard.
var TRUNCATION_MAXIMUM_LENGTH = 90 - TRUNCATION_SEPARATOR.length;
var TRUNCATION_FIRST_PIECE_LONGER_BY = 10;
var TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;
var DocumentCardTitle = (function (_super) {
__extends(DocumentCardTitle, _super);
function DocumentCardTitle(props) {
var _this = _super.call(this, props) || this;
_this.state = {
truncatedTitleFirstPiece: '',
truncatedTitleSecondPiece: ''
};
return _this;
}
DocumentCardTitle.prototype.componentDidMount = function () {
var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate;
if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) {
if (this._doesTitleOverflow()) {
this._startTruncation(this.props);
}
this._events.on(window, 'resize', this._updateTruncation);
}
};
DocumentCardTitle.prototype.componentWillReceiveProps = function (newProps) {
this._events.off(window, 'resize');
this._isTruncated = false;
if (newProps.shouldTruncate && newProps.title && newProps.title.length > TRUNCATION_MINIMUM_LENGTH) {
this._startTruncation(newProps);
this._events.on(window, 'resize', this._updateTruncation);
}
};
DocumentCardTitle.prototype.componentDidUpdate = function () {
// If we're truncating, make sure the title fits
if (this.props.shouldTruncate) {
this._shrinkTitle();
}
};
DocumentCardTitle.prototype.render = function () {
var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate;
var _b = this.state, truncatedTitleFirstPiece = _b.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _b.truncatedTitleSecondPiece;
var documentCardTitle;
if (shouldTruncate && this._isTruncated) {
documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title },
truncatedTitleFirstPiece,
"\u2026",
truncatedTitleSecondPiece));
}
else {
documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title }, title));
}
return documentCardTitle;
};
DocumentCardTitle.prototype._startTruncation = function (props) {
var originalTitle = props.title;
this._isTruncated = false;
// If the title is really short, there's no need to truncate it
if (originalTitle && originalTitle.length >= TRUNCATION_MINIMUM_LENGTH) {
// Break the text into two pieces for assembly later
if (originalTitle.length > TRUNCATION_MAXIMUM_LENGTH) {
// The text is really long, so we can take a chunk out of the middle so the two pieces combine for the maximum length
this._isTruncated = true;
this.setState({
truncatedTitleFirstPiece: originalTitle.slice(0, TRUNCATION_MAXIMUM_LENGTH / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (TRUNCATION_MAXIMUM_LENGTH / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
});
}
else {
// The text is not so long, so we'll just break it into two pieces
this.setState({
truncatedTitleFirstPiece: originalTitle.slice(0, Math.ceil(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY),
truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - Math.floor(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY)
});
}
}
// Save the width we just started truncation at, so that later we will only update truncation if necessary
this._truncatedTitleAtWidth = this._titleElement.clientWidth;
};
DocumentCardTitle.prototype._shrinkTitle = function () {
if (this._doesTitleOverflow()) {
var _a = this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece;
this._isTruncated = true;
if (!truncatedTitleFirstPiece && !truncatedTitleSecondPiece) {
this._startTruncation(this.props);
}
this.setState({
truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),
truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1)
});
}
};
DocumentCardTitle.prototype._doesTitleOverflow = function () {
var titleElement = this._titleElement;
return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth;
};
DocumentCardTitle.prototype._updateTruncation = function () {
// Only update truncation if the title's size has changed since the last time we truncated
if (this._titleElement.clientWidth !== this._truncatedTitleAtWidth) {
// Throttle truncation so that it doesn't happen during a window resize
clearTimeout(this._scrollTimerId);
this._scrollTimerId = this._async.setTimeout(this._startTruncation.bind(this, this.props), 250);
}
};
return DocumentCardTitle;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], DocumentCardTitle.prototype, "_startTruncation", null);
exports.DocumentCardTitle = DocumentCardTitle;
//# sourceMappingURL=DocumentCardTitle.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./DocumentCard")); __export(require("./DocumentCard.Props")); __export(require("./DocumentCardActions")); __export(require("./DocumentCardActivity")); __export(require("./DocumentCardLocation")); __export(require("./DocumentCardPreview")); __export(require("./DocumentCardTitle")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Dropdown.Props.js | 100% | (6 / 6) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (6 / 6) | |
| Dropdown.js | 6.49% | (12 / 185) | 7.35% | (10 / 136) | 3.03% | (1 / 33) | 6.82% | (12 / 176) | |
| Dropdown.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| DropdownPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 | 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DropdownMenuItemType;
(function (DropdownMenuItemType) {
DropdownMenuItemType[DropdownMenuItemType["Normal"] = 0] = "Normal";
DropdownMenuItemType[DropdownMenuItemType["Divider"] = 1] = "Divider";
DropdownMenuItemType[DropdownMenuItemType["Header"] = 2] = "Header";
})(DropdownMenuItemType = exports.DropdownMenuItemType || (exports.DropdownMenuItemType = {}));
//# sourceMappingURL=Dropdown.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 | 6 6 6 1 6 6 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Dropdown_Props_1 = require("./Dropdown.Props");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var Callout_1 = require("../../Callout");
var Label_1 = require("../../Label");
var Button_1 = require("../../Button");
var Panel_1 = require("../../Panel");
var FocusZone_1 = require("../../FocusZone");
var withResponsiveMode_1 = require("../../utilities/decorators/withResponsiveMode");
var Utilities_1 = require("../../Utilities");
var styles = require("./Dropdown.scss");
var Dropdown = Dropdown_1 = (function (_super) {
__extends(Dropdown, _super);
function Dropdown(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
'isDisabled': 'disabled'
});
_this._warnMutuallyExclusive({
'defaultSelectedKey': 'selectedKey'
});
_this._id = props.id || Utilities_1.getId('Dropdown');
var selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
_this.state = {
isOpen: false,
selectedIndex: _this._getSelectedIndex(props.options, selectedKey)
};
return _this;
}
Dropdown.prototype.componentWillReceiveProps = function (newProps) {
// In controlled component usage where selectedKey is provided, update the selectedIndex
// state if the key or options change.
if (newProps.selectedKey !== undefined &&
(newProps.selectedKey !== this.props.selectedKey || newProps.options !== this.props.options)) {
this.setState({
selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
});
}
};
Dropdown.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevState.isOpen === true && this.state.isOpen === false) {
this._dropDown.focus();
}
};
// Primary Render
Dropdown.prototype.render = function () {
var id = this._id;
var _a = this.props, className = _a.className, label = _a.label, options = _a.options, disabled = _a.disabled, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel, required = _a.required, _b = _a.onRenderTitle, onRenderTitle = _b === void 0 ? this._onRenderTitle : _b, _c = _a.onRenderContainer, onRenderContainer = _c === void 0 ? this._onRenderContainer : _c;
var _d = this.state, isOpen = _d.isOpen, selectedIndex = _d.selectedIndex;
var selectedOption = options[selectedIndex];
// Remove this deprecation workaround at 1.0.0
if (isDisabled !== undefined) {
disabled = isDisabled;
}
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-Dropdown-container') },
label && (React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Dropdown-label'), id: id + '-label', ref: this._resolveRef('_dropdownLabel'), required: required }, label)),
React.createElement("div", { "data-is-focusable": !disabled, ref: this._resolveRef('_dropDown'), id: id, className: Utilities_1.css('ms-Dropdown', styles.root, className, (_e = {
'is-open': isOpen
},
_e['is-disabled ' + styles.rootIsDisabled] = disabled,
_e)), tabIndex: disabled ? -1 : 0, onKeyDown: this._onDropdownKeyDown, onKeyUp: this._onDropdownKeyUp, onClick: this._onDropdownClick, "aria-expanded": isOpen ? 'true' : 'false', role: 'combobox', "aria-live": disabled || isOpen ? 'off' : 'assertive', "aria-label": ariaLabel || label, "aria-describedby": id + '-option', "aria-activedescendant": isOpen && selectedIndex >= 0 ? (this._id + '-list' + selectedIndex) : null, "aria-disabled": disabled },
React.createElement("span", { id: id + '-option', className: Utilities_1.css('ms-Dropdown-title', styles.title), key: selectedIndex, "aria-atomic": true }, selectedOption && (onRenderTitle(selectedOption, this._onRenderTitle))),
React.createElement("i", { className: Utilities_1.css('ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown', styles.caretDown), role: 'presentation', "aria-hidden": 'true' })),
isOpen && (onRenderContainer(this.props, this._onRenderContainer))));
var _e;
};
Dropdown.prototype.focus = function () {
if (this._dropDown && this._dropDown.tabIndex !== -1) {
this._dropDown.focus();
}
};
Dropdown.prototype.setSelectedIndex = function (index) {
var _a = this.props, onChanged = _a.onChanged, options = _a.options;
var selectedIndex = this.state.selectedIndex;
index = Math.max(0, Math.min(options.length - 1, index));
if (index !== selectedIndex) {
// Set the selected option.
this.setState({
selectedIndex: index
});
if (onChanged) {
onChanged(options[index], index);
}
}
};
// Render text in dropdown input
Dropdown.prototype._onRenderTitle = function (item) {
return React.createElement("span", null, item.text);
};
// Render Callout or Panel container and pass in list
Dropdown.prototype._onRenderContainer = function (props) {
var _a = this.props, _b = _a.onRenderList, onRenderList = _b === void 0 ? this._onRenderList : _b, responsiveMode = _a.responsiveMode;
var isSmall = responsiveMode <= withResponsiveMode_1.ResponsiveMode.medium;
return (isSmall ?
React.createElement(Panel_1.Panel, { className: Utilities_1.css('ms-Dropdown-panel', styles.panel), isOpen: true, isLightDismiss: true, onDismissed: this._onDismiss, hasCloseButton: false }, onRenderList(props, this._onRenderList))
:
React.createElement(Callout_1.Callout, { isBeakVisible: false, className: Utilities_1.css('ms-Dropdown-callout', styles.callout), gapSpace: 0, doNotLayer: false, targetElement: this._dropDown, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onDismiss, onPositioned: this._onPositioned },
React.createElement("div", { style: { width: this._dropDown.clientWidth - 2 } }, onRenderList(props, this._onRenderList))));
};
// Render List of items
Dropdown.prototype._onRenderList = function (props) {
var _this = this;
var _a = this.props.onRenderItem, onRenderItem = _a === void 0 ? this._onRenderItem : _a;
var id = this._id;
var selectedIndex = this.state.selectedIndex;
return (React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('_focusZone'), direction: FocusZone_1.FocusZoneDirection.vertical, defaultActiveElement: '#' + id + '-list' + selectedIndex, id: id + '-list', className: Utilities_1.css('ms-Dropdown-items', styles.items), "aria-labelledby": id + '-label', onKeyDown: this._onZoneKeyDown }, this.props.options.map(function (item, index) { return onRenderItem(__assign({}, item, { index: index }), _this._onRenderItem); })));
};
// Render items
Dropdown.prototype._onRenderItem = function (item) {
switch (item.itemType) {
case Dropdown_Props_1.DropdownMenuItemType.Divider:
return this._renderSeparator(item);
case Dropdown_Props_1.DropdownMenuItemType.Header:
return this._renderHeader(item);
default:
return this._renderOption(item);
}
};
// Render separator
Dropdown.prototype._renderSeparator = function (item) {
var index = item.index, key = item.key;
if (index > 0) {
return React.createElement("div", { role: 'separator', key: key, className: Utilities_1.css('ms-Dropdown-divider', styles.divider) });
}
return null;
};
Dropdown.prototype._renderHeader = function (item) {
var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;
return (React.createElement("div", { className: Utilities_1.css('ms-Dropdown-header', styles.header) }, onRenderOption(item, this._onRenderOption)));
};
// Render menu item
Dropdown.prototype._renderOption = function (item) {
var _this = this;
var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;
var id = this._id;
return (React.createElement(Button_1.CommandButton, { id: id + '-list' + item.index, ref: Dropdown_1.Option + item.index, key: item.key, "data-index": item.index, "data-is-focusable": true, className: Utilities_1.css('ms-Dropdown-item', styles.item, (_b = {},
_b['is-selected ' + styles.itemIsSelected] = this.state.selectedIndex === item.index,
_b['is-disabled ' + styles.itemIsDisabled] = this.props.disabled === true,
_b)), onClick: function () { return _this._onItemClick(item.index); }, role: 'menu', "aria-selected": this.state.selectedIndex === item.index ? 'true' : 'false', "aria-label": item.text },
" ",
onRenderOption(item, this._onRenderOption)));
var _b;
};
// Render content of item (i.e. text/icon inside of button)
Dropdown.prototype._onRenderOption = function (item) {
return React.createElement("span", null, item.text);
};
Dropdown.prototype._onPositioned = function () {
this._focusZone.focus();
};
Dropdown.prototype._onItemClick = function (index) {
this.setSelectedIndex(index);
this.setState({
isOpen: false
});
};
Dropdown.prototype._onDismiss = function () {
this.setState({ isOpen: false });
this._dropDown.focus();
};
Dropdown.prototype._getSelectedIndex = function (options, selectedKey) {
return Utilities_1.findIndex(options, (function (option) { return (option.isSelected || option.selected || (selectedKey != null) && option.key === selectedKey); }));
};
Dropdown.prototype._onDropdownKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
this.setState({
isOpen: !this.state.isOpen
});
break;
case Utilities_1.KeyCodes.escape:
if (!this.state.isOpen) {
return;
}
this.setState({
isOpen: false
});
break;
case Utilities_1.KeyCodes.up:
this.setSelectedIndex(this.state.selectedIndex - 1);
break;
case Utilities_1.KeyCodes.down:
if (ev.altKey || ev.metaKey) {
this.setState({ isOpen: true });
}
else {
this.setSelectedIndex(this.state.selectedIndex + 1);
}
break;
case Utilities_1.KeyCodes.home:
this.setSelectedIndex(0);
break;
case Utilities_1.KeyCodes.end:
this.setSelectedIndex(this.props.options.length - 1);
break;
case Utilities_1.KeyCodes.space:
// event handled in _onDropdownKeyUp
break;
default:
return;
}
ev.stopPropagation();
ev.preventDefault();
};
Dropdown.prototype._onDropdownKeyUp = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.space:
this.setState({
isOpen: !this.state.isOpen
});
break;
default:
return;
}
ev.stopPropagation();
ev.preventDefault();
};
Dropdown.prototype._onZoneKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.up:
if (ev.altKey || ev.metaKey) {
this.setState({ isOpen: false });
break;
}
return;
case Utilities_1.KeyCodes.escape:
this.setState({ isOpen: false });
break;
default:
return;
}
ev.stopPropagation();
ev.preventDefault();
};
Dropdown.prototype._onDropdownClick = function () {
var _a = this.props, disabled = _a.disabled, isDisabled = _a.isDisabled;
var isOpen = this.state.isOpen;
// Remove this deprecation workaround at 1.0.0
if (isDisabled !== undefined) {
disabled = isDisabled;
}
if (!disabled) {
this.setState({
isOpen: !isOpen
});
}
};
return Dropdown;
}(Utilities_1.BaseComponent));
Dropdown.defaultProps = {
options: []
};
Dropdown.Option = 'option';
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderTitle", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderContainer", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderList", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderItem", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_renderOption", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onRenderOption", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onPositioned", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDismiss", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDropdownKeyDown", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDropdownKeyUp", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onZoneKeyDown", null);
__decorate([
Utilities_1.autobind
], Dropdown.prototype, "_onDropdownClick", null);
Dropdown = Dropdown_1 = __decorate([
withResponsiveMode_1.withResponsiveMode
], Dropdown);
exports.Dropdown = Dropdown;
var Dropdown_1;
//# sourceMappingURL=Dropdown.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_4486e2b3',
title: 'title_4486e2b3',
caretDown: 'caretDown_4486e2b3',
rootIsDisabled: 'rootIsDisabled_4486e2b3',
panel: 'panel_4486e2b3',
callout: 'callout_4486e2b3',
items: 'items_4486e2b3',
item: 'item_4486e2b3',
itemIsDisabled: 'itemIsDisabled_4486e2b3',
itemIsSelected: 'itemIsSelected_4486e2b3',
header: 'header_4486e2b3',
divider: 'divider_4486e2b3',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_4486e2b3{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-bottom:10px;position:relative;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_4486e2b3:active .caretDown_4486e2b3,.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:focus .caretDown_4486e2b3,.root_4486e2b3:focus .title_4486e2b3,.root_4486e2b3:hover .caretDown_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3:active .caretDown_4486e2b3,.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:focus .caretDown_4486e2b3,.root_4486e2b3:focus .title_4486e2b3,.root_4486e2b3:hover .caretDown_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3:active .caretDown_4486e2b3,.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:focus .caretDown_4486e2b3,.root_4486e2b3:focus .title_4486e2b3,.root_4486e2b3:hover .caretDown_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{color:#37006e}}.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3:active .title_4486e2b3,.root_4486e2b3:hover .title_4486e2b3{border-color:#37006e}}.root_4486e2b3:focus .title_4486e2b3{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3:focus .title_4486e2b3{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3:focus .title_4486e2b3{border-color:#37006e}}.root_4486e2b3 .ms-Label{display:inline-block;margin-bottom:8px}.root_4486e2b3.rootIsDisabled_4486e2b3 .title_4486e2b3{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}@media screen and (-ms-high-contrast:active){.root_4486e2b3.rootIsDisabled_4486e2b3 .title_4486e2b3{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3.rootIsDisabled_4486e2b3 .title_4486e2b3{border-color:#600000;color:#600000}}.root_4486e2b3.rootIsDisabled_4486e2b3 .caretDown_4486e2b3{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4486e2b3.rootIsDisabled_4486e2b3 .caretDown_4486e2b3{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_4486e2b3.rootIsDisabled_4486e2b3 .caretDown_4486e2b3{color:#600000}}.caretDown_4486e2b3{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";font-size:12px;position:absolute;top:0;pointer-events:none;line-height:32px}html[dir=ltr] .caretDown_4486e2b3{right:12px}html[dir=rtl] .caretDown_4486e2b3{left:12px}.title_4486e2b3{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 12px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}html[dir=rtl] .title_4486e2b3{padding:0 12px 0 32px}.panel_4486e2b3 .ms-Panel-main{box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.panel_4486e2b3 .ms-Panel-contentInner{padding:0 0 20px}.callout_4486e2b3{box-shadow:0 0 15px -5px rgba(0,0,0,.4);border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.items_4486e2b3{display:block}.item_4486e2b3{background:0 0;box-sizing:border-box;cursor:pointer;display:block;width:100%;height:auto;min-height:36px;line-height:20px;padding:5px 16px;position:relative;border:1px solid transparent;word-wrap:break-word;text-align:left}@media screen and (-ms-high-contrast:active){.item_4486e2b3{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_4486e2b3{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.item_4486e2b3:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.item_4486e2b3:hover{background-color:#1aebff;border-color:#1aebff;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3:hover:focus{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_4486e2b3:hover{background-color:#37006e;border-color:#37006e;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.item_4486e2b3::-moz-focus-inner{border:0}.item_4486e2b3{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .item_4486e2b3:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.item_4486e2b3:focus{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_4486e2b3:active{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3.itemIsDisabled_4486e2b3{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}.item_4486e2b3 .ms-Button-flexContainer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.item_4486e2b3.itemIsSelected_4486e2b3{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3.itemIsSelected_4486e2b3:hover{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.item_4486e2b3.itemIsSelected_4486e2b3::-moz-focus-inner{border:0}.item_4486e2b3.itemIsSelected_4486e2b3{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .item_4486e2b3.itemIsSelected_4486e2b3:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.item_4486e2b3.itemIsSelected_4486e2b3{background-color:#1aebff;border-color:#1aebff;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_4486e2b3.itemIsSelected_4486e2b3:focus{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_4486e2b3.itemIsSelected_4486e2b3{background-color:#37006e;border-color:#37006e;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.header_4486e2b3{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html[dir=ltr] .header_4486e2b3{text-align:left}html[dir=rtl] .header_4486e2b3{text-align:right}.divider_4486e2b3{height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Dropdown.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Dropdown_Basic_Example_1 = require("./examples/Dropdown.Basic.Example");
var DropdownBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx');
var DropdownPage = (function (_super) {
__extends(DropdownPage, _super);
function DropdownPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DropdownPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Dropdown', componentName: 'DropdownExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Dropdown', code: DropdownBasicExampleCode },
React.createElement(Dropdown_Basic_Example_1.DropdownBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained."),
React.createElement("li", null, "Dropdowns contain shortened statements or words."),
React.createElement("li", null, "Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options)."))), donts: React.createElement("div", null), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Dropdown/Dropdown.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return DropdownPage;
}(React.Component));
exports.DropdownPage = DropdownPage;
//# sourceMappingURL=DropdownPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Dropdown")); __export(require("./Dropdown.Props")); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 12 12 12 1 12 12 12 12 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var DIRECTIONAL_KEY_CODES = [
Utilities_1.KeyCodes.up,
Utilities_1.KeyCodes.down,
Utilities_1.KeyCodes.left,
Utilities_1.KeyCodes.right,
Utilities_1.KeyCodes.home,
Utilities_1.KeyCodes.end,
Utilities_1.KeyCodes.tab,
Utilities_1.KeyCodes.pageUp,
Utilities_1.KeyCodes.pageDown
];
// We will track the last focus visibility state so that if we tear down and recreate
// the Fabric component, we will use the last known value as the default.
var _lastIsFocusVisible = false;
// Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work.
if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) {
document.documentElement.setAttribute('dir', 'ltr');
}
var Fabric = (function (_super) {
__extends(Fabric, _super);
function Fabric() {
var _this = _super.call(this) || this;
_this.state = {
isFocusVisible: _lastIsFocusVisible
};
return _this;
}
Fabric.prototype.componentDidMount = function () {
this._events.on(document.body, 'mousedown', this._onMouseDown, true);
this._events.on(document.body, 'keydown', this._onKeyDown, true);
};
Fabric.prototype.render = function () {
var isFocusVisible = this.state.isFocusVisible;
var rootClass = Utilities_1.css('ms-Fabric ms-font-m', this.props.className, {
'is-focusVisible': isFocusVisible
});
return (React.createElement("div", __assign({}, this.props, { className: rootClass, ref: 'root' })));
};
Fabric.prototype._onMouseDown = function () {
if (this.state.isFocusVisible) {
this.setState({
isFocusVisible: false
});
_lastIsFocusVisible = false;
}
};
Fabric.prototype._onKeyDown = function (ev) {
if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
this.setState({
isFocusVisible: true
});
_lastIsFocusVisible = true;
}
};
return Fabric;
}(Utilities_1.BaseComponent));
exports.Fabric = Fabric;
//# sourceMappingURL=Fabric.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 10 10 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Fabric")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Facepile.Props.js | 100% | (7 / 7) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (7 / 7) | |
| Facepile.js | 10.23% | (9 / 88) | 14.29% | (7 / 49) | 4% | (1 / 25) | 10.84% | (9 / 83) | |
| Facepile.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| FacepilePage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| index.js | 100% | (7 / 7) | 50% | (1 / 2) | 100% | (1 / 1) | 100% | (5 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var OverflowButtonType;
(function (OverflowButtonType) {
/** No overflow */
OverflowButtonType[OverflowButtonType["none"] = 0] = "none";
/** +1 overflow icon */
OverflowButtonType[OverflowButtonType["descriptive"] = 1] = "descriptive";
/** More overflow icon */
OverflowButtonType[OverflowButtonType["more"] = 2] = "more";
/** Chevron overflow icon */
OverflowButtonType[OverflowButtonType["downArrow"] = 3] = "downArrow";
})(OverflowButtonType = exports.OverflowButtonType || (exports.OverflowButtonType = {}));
//# sourceMappingURL=Facepile.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Facepile_Props_1 = require("./Facepile.Props");
var FocusZone_1 = require("../../FocusZone");
var Button_1 = require("../../Button");
var Persona_1 = require("../../Persona");
var styles = require("./Facepile.scss");
var Facepile = (function (_super) {
__extends(Facepile, _super);
function Facepile(props) {
var _this = _super.call(this, props) || this;
_this._ariaDescriptionId = Utilities_1.getId();
return _this;
}
Facepile.prototype.render = function () {
var _this = this;
var _a = this.props, chevronButtonProps = _a.chevronButtonProps, maxDisplayablePersonas = _a.maxDisplayablePersonas, overflowButtonProps = _a.overflowButtonProps, overflowButtonType = _a.overflowButtonType, ariaDescription = _a.ariaDescription, personas = _a.personas, showAddButton = _a.showAddButton;
var numPersonasToShow = Math.min(personas.length, maxDisplayablePersonas);
// Added for deprecating chevronButtonProps. Can remove after v1.0
if (chevronButtonProps && !overflowButtonProps) {
overflowButtonProps = chevronButtonProps;
overflowButtonType = Facepile_Props_1.OverflowButtonType.downArrow;
}
return (React.createElement("div", { className: Utilities_1.css('ms-Facepile', styles.root) },
React.createElement("div", { className: Utilities_1.css('ms-Facepile-itemContainer', styles.itemContainer) },
showAddButton ? this._getAddNewElement() : null,
this.onRenderAriaDescription(),
React.createElement(FocusZone_1.FocusZone, { ariaDescribedBy: this._ariaDescriptionId, role: 'listbox', className: Utilities_1.css('ms-Facepile-members', styles.members), direction: FocusZone_1.FocusZoneDirection.horizontal }, personas.slice(0, numPersonasToShow).map(function (persona, index) {
var personaControl = _this._getPersonaControl(persona);
return persona.onClick ?
_this._getElementWithOnClickEvent(personaControl, persona, index) :
_this._getElementWithoutOnClickEvent(personaControl, persona, index);
})),
overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null)));
};
Facepile.prototype.onRenderAriaDescription = function () {
var ariaDescription = this.props.ariaDescription;
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
// otherwise it will be assigned to descriptionSpan.
return ariaDescription && (React.createElement("span", { className: styles.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription));
};
Facepile.prototype._getPersonaControl = function (persona) {
var _a = this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
return React.createElement(Persona_1.Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, primaryText: persona.personaName, size: personaSize, hidePersonaDetails: true }, (getPersonaProps ? getPersonaProps(persona) : null)));
};
Facepile.prototype._getElementWithOnClickEvent = function (personaControl, persona, index) {
return React.createElement(Button_1.BaseButton, __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.buttonProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onClick: this._onPersonaClick.bind(this, persona), onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl);
};
Facepile.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, index) {
return React.createElement("div", __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.divProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl);
};
Facepile.prototype._getOverflowElement = function (numPersonasToShow) {
switch (this.props.overflowButtonType) {
case Facepile_Props_1.OverflowButtonType.descriptive:
return this._getDescriptiveOverflowElement(numPersonasToShow);
case Facepile_Props_1.OverflowButtonType.downArrow:
return this._getIconElement('ChevronDown');
case Facepile_Props_1.OverflowButtonType.more:
return this._getIconElement('More');
default:
return null;
}
};
Facepile.prototype._getDescriptiveOverflowElement = function (numPersonasToShow) {
var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personas = _a.personas, personaSize = _a.personaSize;
var numPersonasNotPictured = personas.length - numPersonasToShow;
if (!overflowButtonProps || numPersonasNotPictured < 1) {
return null;
}
var personaNames = personas.slice(numPersonasToShow).map(function (p) { return p.personaName; }).join(', ');
return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { ariaDescription: personaNames, className: Utilities_1.css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }),
React.createElement(Persona_1.Persona, { title: personaNames, size: personaSize, hidePersonaDetails: true, onRenderInitials: function () {
return (React.createElement("span", null, '+' + numPersonasNotPictured));
} }));
};
Facepile.prototype._getIconElement = function (icon) {
var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;
return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { className: Utilities_1.css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }),
React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement("i", { className: Utilities_1.css('ms-Icon', 'msIcon', "ms-Icon ms-Icon--" + icon), "aria-hidden": 'true' })); } }));
};
Facepile.prototype._getAddNewElement = function () {
var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;
return React.createElement(Button_1.BaseButton, __assign({}, addButtonProps, { className: Utilities_1.css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }),
React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement("i", { className: 'ms-Icon msIcon ms-Icon--AddFriend', "aria-hidden": 'true' })); } }));
};
Facepile.prototype._onPersonaClick = function (persona, ev) {
persona.onClick(ev, persona);
ev.preventDefault();
ev.stopPropagation();
};
Facepile.prototype._onPersonaMouseMove = function (persona, ev) {
if (!!persona.onMouseMove) {
persona.onMouseMove(ev, persona);
}
};
Facepile.prototype._onPersonaMouseOut = function (persona, ev) {
if (!!persona.onMouseOut) {
persona.onMouseOut(ev, persona);
}
};
return Facepile;
}(Utilities_1.BaseComponent));
Facepile.defaultProps = {
maxDisplayablePersonas: 5,
personas: [],
personaSize: Persona_1.PersonaSize.extraSmall
};
exports.Facepile = Facepile;
//# sourceMappingURL=Facepile.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_e97197f5',
clear: 'clear_e97197f5',
itemContainer: 'itemContainer_e97197f5',
members: 'members_e97197f5',
itemButton: 'itemButton_e97197f5',
addButton: 'addButton_e97197f5',
overflowButton: 'overflowButton_e97197f5',
descriptiveOverflowButton: 'descriptiveOverflowButton_e97197f5',
screenReaderOnly: 'screenReaderOnly_e97197f5',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_e97197f5{width:auto}.clear_e97197f5{clear:both}.itemContainer_e97197f5{display:-webkit-box;display:-ms-flexbox;display:flex}.members_e97197f5{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;margin:-2px}.members_e97197f5>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px}.itemButton_e97197f5{text-align:center;padding:0;border-radius:50%;vertical-align:top}.ms-Fabric.is-focusVisible .itemButton_e97197f5:focus{outline:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemButton_e97197f5 .ms-Persona-details{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}button.itemButton_e97197f5{display:inline;background:0 0;padding:0;cursor:pointer;border:none}button.itemButton_e97197f5::-moz-focus-inner{padding:0;border:0}button.addButton_e97197f5{font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] button.addButton_e97197f5{margin-right:4px}html[dir=rtl] button.addButton_e97197f5{margin-left:4px}button.addButton_e97197f5:focus,button.addButton_e97197f5:hover{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}button.addButton_e97197f5:active{background-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}button.addButton_e97197f5:disabled{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}button.overflowButton_e97197f5{font-size:14px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.overflowButton_e97197f5{margin-left:4px}html[dir=rtl] button.overflowButton_e97197f5{margin-right:4px}button.descriptiveOverflowButton_e97197f5{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.descriptiveOverflowButton_e97197f5{margin-left:4px}html[dir=rtl] button.descriptiveOverflowButton_e97197f5{margin-right:4px}.screenReaderOnly_e97197f5{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Facepile.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Facepile_AddFace_Example_1 = require("./examples/Facepile.AddFace.Example");
var Facepile_Basic_Example_1 = require("./examples/Facepile.Basic.Example");
var Facepile_Overflow_Example_1 = require("./examples/Facepile.Overflow.Example");
var FacepileAddFaceExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx');
var FacepileBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx');
var FacepileOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx');
var FacepilePage = (function (_super) {
__extends(FacepilePage, _super);
function FacepilePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
FacepilePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Facepile', componentName: 'FacepileExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Facepile with Extras', code: FacepileBasicExampleCode },
React.createElement(Facepile_Basic_Example_1.FacepileBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Facepile with Overflow', code: FacepileOverflowExampleCode },
React.createElement(Facepile_Overflow_Example_1.FacepileOverflowExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Facepile with Add Face', code: FacepileAddFaceExampleCode },
React.createElement(Facepile_AddFace_Example_1.FacepileAddFaceExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow."),
React.createElement("h2", { className: 'ms-font-xl' }, "Adding people"),
React.createElement("p", null, "The component can include an add button which can be used for quickly adding a person to the list."),
React.createElement("h2", { className: 'ms-font-xl' }, "Empty state"),
React.createElement("p", null, "The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list."),
React.createElement("h2", { className: 'ms-font-xl' }, "One person"),
React.createElement("p", null, "When there is only one person in the Facepile, consider using their name next to the face or initials."),
React.createElement("h2", { className: 'ms-font-xl' }, "Expanding the list when there is no overflow"),
React.createElement("p", null, "When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas."),
React.createElement("h2", { className: 'ms-font-xl' }, "Overflow"),
React.createElement("p", null, "When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use if looking for a way to represent who has access to an area and need to show that as a people representation."),
React.createElement("li", null, "Only show the Add button if a user has access to do so."),
React.createElement("li", null, "Allow a way for the user to understand who the person is. Many common ways to do this are with a tooltip or adding the ability to open up a PeopleCard Experience."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use for things other than people."),
React.createElement("li", null, "Overwhelm users by listing every single person as a circle but truncate and provide a way to see the full list."),
React.createElement("li", null, "Don\u2019t use this control for experiences where you need to manage details of hundreds of users, you are better off using a list control."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/FacePile/FacePile.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return FacepilePage;
}(React.Component));
exports.FacepilePage = FacepilePage;
//# sourceMappingURL=FacepilePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 4 4 | "use strict";
function __export(m) {
for (var p in m) Eif (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./Facepile.Props"));
__export(require("./Facepile"));
//# sourceMappingURL=index.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| FocusTrapZone.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| FocusTrapZone.js | 8.93% | (10 / 112) | 9.8% | (10 / 102) | 5.56% | (1 / 18) | 9.52% | (10 / 105) | |
| FocusTrapZonePage.js | 25.81% | (8 / 31) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 28.57% | (8 / 28) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=FocusTrapZone.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusTrapZone = (function (_super) {
__extends(FocusTrapZone, _super);
function FocusTrapZone() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._isInFocusStack = false;
_this._isInClickStack = false;
return _this;
}
FocusTrapZone.prototype.componentWillMount = function () {
var _a = this.props, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c;
if (forceFocusInsideTrap) {
this._isInFocusStack = true;
FocusTrapZone._focusStack.push(this);
}
if (!isClickableOutsideFocusTrap) {
this._isInClickStack = true;
FocusTrapZone._clickStack.push(this);
}
};
FocusTrapZone.prototype.componentDidMount = function () {
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c;
this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement;
if (!Utilities_1.elementContains(this.refs.root, this._previouslyFocusedElement)) {
this.focus();
}
if (forceFocusInsideTrap) {
this._events.on(window, 'focus', this._forceFocusInTrap, true);
}
if (!isClickableOutsideFocusTrap) {
this._events.on(window, 'click', this._forceClickInTrap, true);
}
};
FocusTrapZone.prototype.componentWillUnmount = function () {
var _this = this;
var ignoreExternalFocusing = this.props.ignoreExternalFocusing;
this._events.dispose();
if (this._isInFocusStack || this._isInClickStack) {
var filter = function (value) {
return _this !== value;
};
if (this._isInFocusStack) {
FocusTrapZone._focusStack = FocusTrapZone._focusStack.filter(filter);
}
if (this._isInClickStack) {
FocusTrapZone._clickStack = FocusTrapZone._clickStack.filter(filter);
}
}
if (!ignoreExternalFocusing && this._previouslyFocusedElement) {
this._previouslyFocusedElement.focus();
}
};
FocusTrapZone.prototype.render = function () {
var _a = this.props, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
return (React.createElement("div", __assign({}, divProps, { className: className, ref: 'root', "aria-labelledby": ariaLabelledBy, onKeyDown: this._onKeyboardHandler }), this.props.children));
};
/**
* Need to expose this method in case of popups since focus needs to be set when popup is opened
*/
FocusTrapZone.prototype.focus = function () {
var firstFocusableSelector = this.props.firstFocusableSelector;
var _firstFocusableChild;
var root = this.refs.root;
if (firstFocusableSelector) {
_firstFocusableChild = root.querySelector('.' + firstFocusableSelector);
}
else {
_firstFocusableChild = Utilities_1.getNextElement(root, root.firstChild, true, false, false, true);
}
if (_firstFocusableChild) {
_firstFocusableChild.focus();
}
};
FocusTrapZone.prototype._onKeyboardHandler = function (ev) {
if (ev.which !== Utilities_1.KeyCodes.tab) {
return;
}
var root = this.refs.root;
var _firstFocusableChild = Utilities_1.getFirstFocusable(root, root.firstChild, true);
var _lastFocusableChild = Utilities_1.getLastFocusable(root, root.lastChild, true);
if (ev.shiftKey && _firstFocusableChild === ev.target) {
_lastFocusableChild.focus();
ev.preventDefault();
ev.stopPropagation();
}
else if (!ev.shiftKey && _lastFocusableChild === ev.target) {
_firstFocusableChild.focus();
ev.preventDefault();
ev.stopPropagation();
}
};
FocusTrapZone.prototype._forceFocusInTrap = function (ev) {
if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
var focusedElement = document.activeElement;
if (!Utilities_1.elementContains(this.refs.root, focusedElement)) {
this.focus();
ev.preventDefault();
ev.stopPropagation();
}
}
};
FocusTrapZone.prototype._forceClickInTrap = function (ev) {
if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) {
var clickedElement = ev.target;
if (clickedElement && !Utilities_1.elementContains(this.refs.root, clickedElement)) {
this.focus();
ev.preventDefault();
ev.stopPropagation();
}
}
};
return FocusTrapZone;
}(Utilities_1.BaseComponent));
FocusTrapZone._focusStack = [];
FocusTrapZone._clickStack = [];
__decorate([
Utilities_1.autobind
], FocusTrapZone.prototype, "_onKeyboardHandler", null);
exports.FocusTrapZone = FocusTrapZone;
//# sourceMappingURL=FocusTrapZone.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var example_app_base_1 = require("@uifabric/example-app-base");
var FocusTrapZone_Box_Example_1 = require("./examples/FocusTrapZone.Box.Example");
var FocusTrapZoneBoxExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx');
var FocusTrapZone_Box_FocusOnCustomElement_Example_1 = require("./examples/FocusTrapZone.Box.FocusOnCustomElement.Example");
var FocusTrapZoneBoxExampleWithFocusableItemCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx');
var FocusTrapZone_Box_Click_Example_1 = require("./examples/FocusTrapZone.Box.Click.Example");
var FocusTrapZoneBoxClickExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx');
var FocusTrapZone_Nested_Example_1 = require("./examples/FocusTrapZone.Nested.Example");
var FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx');
var FocusTrapZonePage = (function (_super) {
__extends(FocusTrapZonePage, _super);
function FocusTrapZonePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
FocusTrapZonePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'FocusTrapZone', componentName: 'FocusTrapZoneExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Box', code: FocusTrapZoneBoxExampleCode },
React.createElement(FocusTrapZone_Box_Example_1.default, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Box with focus on custom focusable element', code: FocusTrapZoneBoxExampleWithFocusableItemCode },
React.createElement(FocusTrapZone_Box_FocusOnCustomElement_Example_1.default, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Box with Clicking outside Trap Zone enabled', code: FocusTrapZoneBoxClickExampleCode },
React.createElement(FocusTrapZone_Box_Click_Example_1.default, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Multiple Nest FocusTrapZones', code: FocusTrapZoneNestedExampleCode },
React.createElement(FocusTrapZone_Nested_Example_1.default, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/utilities/FocusTrapZone' }, "FocusTrapZone"),
React.createElement("span", null, " is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return FocusTrapZonePage;
}(React.Component));
exports.FocusTrapZonePage = FocusTrapZonePage;
//# sourceMappingURL=FocusTrapZonePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./FocusTrapZone")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| FocusZone.Props.js | 100% | (6 / 6) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (6 / 6) | |
| FocusZone.js | 3.3% | (11 / 333) | 3.46% | (10 / 289) | 2.94% | (1 / 34) | 3.37% | (11 / 326) | |
| FocusZonePage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FocusZoneDirection;
(function (FocusZoneDirection) {
/** Only react to up/down arrows. */
FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical";
/** Only react to left/right arrows. */
FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal";
/** React to all arrows. */
FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional";
})(FocusZoneDirection = exports.FocusZoneDirection || (exports.FocusZoneDirection = {}));
//# sourceMappingURL=FocusZone.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 | 14 14 14 1 14 14 14 14 14 14 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var FocusZone_Props_1 = require("./FocusZone.Props");
var Utilities_1 = require("../../Utilities");
var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
var IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';
var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';
var TABINDEX = 'tabindex';
var _allInstances = {};
var ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search'];
var FocusZone = (function (_super) {
__extends(FocusZone, _super);
function FocusZone(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ rootProps: null });
_this._id = Utilities_1.getId('FocusZone');
_allInstances[_this._id] = _this;
_this._focusAlignment = {
left: 0,
top: 0
};
return _this;
}
FocusZone.prototype.componentDidMount = function () {
var windowElement = this.refs.root.ownerDocument.defaultView;
var parentElement = Utilities_1.getParent(this.refs.root);
while (parentElement &&
parentElement !== document.body &&
parentElement.nodeType === 1) {
if (Utilities_1.isElementFocusZone(parentElement)) {
this._isInnerZone = true;
break;
}
parentElement = Utilities_1.getParent(parentElement);
}
this._events.on(windowElement, 'keydown', this._onKeyDownCapture, true);
// Assign initial tab indexes so that we can set initial focus as appropriate.
this._updateTabIndexes();
if (this.props.defaultActiveElement) {
this._activeElement = Utilities_1.getDocument().querySelector(this.props.defaultActiveElement);
this.focus();
}
};
FocusZone.prototype.componentWillUnmount = function () {
delete _allInstances[this._id];
};
FocusZone.prototype.render = function () {
var _a = this.props, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
return (React.createElement("div", __assign({}, divProps, rootProps, { className: Utilities_1.css('ms-FocusZone', className), ref: 'root', "data-focuszone-id": this._id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown, onFocus: this._onFocus }, { onMouseDownCapture: this._onMouseDown }), this.props.children));
};
/**
* Sets focus to the first tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
FocusZone.prototype.focus = function () {
if (this._activeElement && Utilities_1.elementContains(this.refs.root, this._activeElement)) {
this._activeElement.focus();
return true;
}
else {
var firstChild = this.refs.root.firstChild;
return this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true));
}
};
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* onBeforeFocus to created delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param {HTMLElement} element The child element within the zone to focus.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
FocusZone.prototype.focusElement = function (element) {
var onBeforeFocus = this.props.onBeforeFocus;
if (onBeforeFocus && !onBeforeFocus(element)) {
return false;
}
if (element) {
if (this._activeElement) {
this._activeElement.tabIndex = -1;
}
this._activeElement = element;
if (element) {
if (!this._focusAlignment) {
this._setFocusAlignment(element, true, true);
}
this._activeElement.tabIndex = 0;
element.focus();
return true;
}
}
return false;
};
FocusZone.prototype._onFocus = function (ev) {
var onActiveElementChanged = this.props.onActiveElementChanged;
if (this._isImmediateDescendantOfZone(ev.target)) {
this._activeElement = ev.target;
this._setFocusAlignment(this._activeElement);
}
else {
var parentElement = ev.target;
while (parentElement && parentElement !== this.refs.root) {
if (Utilities_1.isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) {
this._activeElement = parentElement;
break;
}
parentElement = Utilities_1.getParent(parentElement);
}
}
if (onActiveElementChanged) {
onActiveElementChanged(this._activeElement, ev);
}
};
/**
* Handle global tab presses so that we can patch tabindexes on the fly.
*/
FocusZone.prototype._onKeyDownCapture = function (ev) {
if (ev.which === Utilities_1.KeyCodes.tab) {
this._updateTabIndexes();
}
};
FocusZone.prototype._onMouseDown = function (ev) {
var disabled = this.props.disabled;
if (disabled) {
return;
}
var target = ev.target;
var path = [];
while (target && target !== this.refs.root) {
path.push(target);
target = Utilities_1.getParent(target);
}
while (path.length) {
target = path.pop();
if (Utilities_1.isElementFocusZone(target)) {
break;
}
else if (target && Utilities_1.isElementTabbable(target)) {
target.tabIndex = 0;
this._setFocusAlignment(target, true, true);
}
}
};
/**
* Handle the keystrokes.
*/
FocusZone.prototype._onKeyDown = function (ev) {
var _a = this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke;
if (disabled) {
return;
}
if (this.props.onKeyDown) {
this.props.onKeyDown(ev);
if (ev.isDefaultPrevented()) {
return;
}
}
if (isInnerZoneKeystroke &&
this._isImmediateDescendantOfZone(ev.target) &&
isInnerZoneKeystroke(ev)) {
// Try to focus
var innerZone = this._getFirstInnerZone();
if (!innerZone || !innerZone.focus()) {
return;
}
}
else if (ev.altKey) {
return;
}
else {
switch (ev.which) {
case Utilities_1.KeyCodes.space:
if (this._tryInvokeClickForFocusable(ev.target)) {
break;
}
return;
case Utilities_1.KeyCodes.left:
if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusLeft()) {
break;
}
return;
case Utilities_1.KeyCodes.right:
if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusRight()) {
break;
}
return;
case Utilities_1.KeyCodes.up:
if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusUp()) {
break;
}
return;
case Utilities_1.KeyCodes.down:
if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusDown()) {
break;
}
return;
case Utilities_1.KeyCodes.home:
var firstChild = this.refs.root.firstChild;
if (this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true))) {
break;
}
return;
case Utilities_1.KeyCodes.end:
var lastChild = this.refs.root.lastChild;
if (this.focusElement(Utilities_1.getPreviousElement(this.refs.root, lastChild, true, true, true))) {
break;
}
return;
case Utilities_1.KeyCodes.enter:
if (this._tryInvokeClickForFocusable(ev.target)) {
break;
}
return;
default:
return;
}
}
ev.preventDefault();
ev.stopPropagation();
};
/**
* Walk up the dom try to find a focusable element.
*/
FocusZone.prototype._tryInvokeClickForFocusable = function (target) {
do {
if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT') {
return false;
}
if (this._isImmediateDescendantOfZone(target) &&
target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&
target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {
Utilities_1.EventGroup.raise(target, 'click', null, true);
return true;
}
target = Utilities_1.getParent(target);
} while (target !== this.refs.root);
return false;
};
/**
* Traverse to find first child zone.
*/
FocusZone.prototype._getFirstInnerZone = function (rootElement) {
rootElement = rootElement || this._activeElement || this.refs.root;
var child = rootElement.firstElementChild;
while (child) {
if (Utilities_1.isElementFocusZone(child)) {
return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];
}
var match = this._getFirstInnerZone(child);
if (match) {
return match;
}
child = child.nextElementSibling;
}
return null;
};
FocusZone.prototype._moveFocus = function (isForward, getDistanceFromCenter, ev) {
var element = this._activeElement;
var candidateDistance = -1;
var candidateElement;
var changedFocus = false;
var isBidirectional = this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional;
if (!element) {
return false;
}
if (this._isElementInput(element)) {
if (!this._shouldInputLoseFocus(element, isForward)) {
return false;
}
}
var activeRect = isBidirectional ? element.getBoundingClientRect() : null;
do {
element = isForward ?
Utilities_1.getNextElement(this.refs.root, element) :
Utilities_1.getPreviousElement(this.refs.root, element);
if (isBidirectional) {
if (element) {
var targetRect = element.getBoundingClientRect();
var elementDistance = getDistanceFromCenter(activeRect, targetRect);
if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {
candidateDistance = elementDistance;
candidateElement = element;
}
if (candidateDistance >= 0 && elementDistance < 0) {
break;
}
}
}
else {
candidateElement = element;
break;
}
} while (element);
// Focus the closest candidate
if (candidateElement && candidateElement !== this._activeElement) {
changedFocus = true;
this.focusElement(candidateElement);
}
else if (this.props.isCircularNavigation) {
if (isForward) {
return this.focusElement(Utilities_1.getNextElement(this.refs.root, this.refs.root.firstElementChild, true));
}
else {
return this.focusElement(Utilities_1.getPreviousElement(this.refs.root, this.refs.root.lastElementChild, true, true, true));
}
}
return changedFocus;
};
FocusZone.prototype._moveFocusDown = function () {
var targetTop = -1;
var leftAlignment = this._focusAlignment.left;
if (this._moveFocus(true, function (activeRect, targetRect) {
var distance = -1;
// ClientRect values can be floats that differ by very small fractions of a decimal.
// If the difference between top and bottom are within a pixel then we should treat
// them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
// but without Math.Floor they will be handled incorrectly.
var targetRectTop = Math.floor(targetRect.top);
var activeRectBottom = Math.floor(activeRect.bottom);
if ((targetTop === -1 && targetRectTop >= activeRectBottom) ||
(targetRectTop === targetTop)) {
targetTop = targetRectTop;
if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
distance = 0;
}
else {
distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment);
}
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, false, true);
return true;
}
return false;
};
FocusZone.prototype._moveFocusUp = function () {
var targetTop = -1;
var leftAlignment = this._focusAlignment.left;
if (this._moveFocus(false, function (activeRect, targetRect) {
var distance = -1;
// ClientRect values can be floats that differ by very small fractions of a decimal.
// If the difference between top and bottom are within a pixel then we should treat
// them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
// but without Math.Floor they will be handled incorrectly.
var targetRectBottom = Math.floor(targetRect.bottom);
var targetRectTop = Math.floor(targetRect.top);
var activeRectTop = Math.floor(activeRect.top);
if ((targetTop === -1 && targetRectBottom <= activeRectTop) ||
(targetRectTop === targetTop)) {
targetTop = targetRectTop;
if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
distance = 0;
}
else {
distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment);
}
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, false, true);
return true;
}
return false;
};
FocusZone.prototype._moveFocusLeft = function () {
var _this = this;
var targetTop = -1;
var topAlignment = this._focusAlignment.top;
if (this._moveFocus(Utilities_1.getRTL(), function (activeRect, targetRect) {
var distance = -1;
if ((targetTop === -1 &&
targetRect.right <= activeRect.right &&
(_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) ||
(targetRect.top === targetTop)) {
targetTop = targetRect.top;
distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment);
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, true, false);
return true;
}
return false;
};
FocusZone.prototype._moveFocusRight = function () {
var _this = this;
var targetTop = -1;
var topAlignment = this._focusAlignment.top;
if (this._moveFocus(!Utilities_1.getRTL(), function (activeRect, targetRect) {
var distance = -1;
if ((targetTop === -1 &&
targetRect.left >= activeRect.left &&
(_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) ||
(targetRect.top === targetTop)) {
targetTop = targetRect.top;
distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment);
}
return distance;
})) {
this._setFocusAlignment(this._activeElement, true, false);
return true;
}
return false;
};
FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) {
if (this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional &&
(!this._focusAlignment || isHorizontal || isVertical)) {
var rect = element.getBoundingClientRect();
var left = rect.left + (rect.width / 2);
var top_1 = rect.top + (rect.height / 2);
if (!this._focusAlignment) {
this._focusAlignment = { left: left, top: top_1 };
}
if (isHorizontal) {
this._focusAlignment.left = left;
}
if (isVertical) {
this._focusAlignment.top = top_1;
}
}
};
FocusZone.prototype._isImmediateDescendantOfZone = function (element) {
var parentElement = Utilities_1.getParent(element);
while (parentElement && parentElement !== this.refs.root && parentElement !== document.body) {
if (Utilities_1.isElementFocusZone(parentElement)) {
return false;
}
parentElement = Utilities_1.getParent(parentElement);
}
return true;
};
FocusZone.prototype._updateTabIndexes = function (element) {
if (!element) {
element = this.refs.root;
if (this._activeElement && !Utilities_1.elementContains(element, this._activeElement)) {
this._activeElement = null;
}
}
var childNodes = element.children;
for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
var child = childNodes[childIndex];
if (!Utilities_1.isElementFocusZone(child)) {
// If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
child.setAttribute(TABINDEX, '-1');
}
if (Utilities_1.isElementTabbable(child)) {
if (this.props.disabled) {
child.setAttribute(TABINDEX, '-1');
}
else if (!this._isInnerZone && (!this._activeElement || this._activeElement === child)) {
this._activeElement = child;
if (child.getAttribute(TABINDEX) !== '0') {
child.setAttribute(TABINDEX, '0');
}
}
else if (child.getAttribute(TABINDEX) !== '-1') {
child.setAttribute(TABINDEX, '-1');
}
}
else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {
// Disgusting IE hack. Sad face.
child.setAttribute('focusable', 'false');
}
this._updateTabIndexes(child);
}
}
};
FocusZone.prototype._isElementInput = function (element) {
if (element && element.tagName && element.tagName.toLowerCase() === 'input') {
return true;
}
return false;
};
FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) {
if (element &&
element.type &&
ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {
var selectionStart = element.selectionStart;
var selectionEnd = element.selectionEnd;
var isRangeSelected = selectionStart !== selectionEnd;
var inputValue = element.value;
// We shouldn't lose focus in the following cases:
// 1. There is range selected.
// 2. When selection start is larger than 0 and it is backward.
// 3. when selection start is not the end of lenght and it is forward.
if (isRangeSelected ||
(selectionStart > 0 && !isForward) ||
(selectionStart !== inputValue.length && isForward)) {
return false;
}
}
return true;
};
return FocusZone;
}(Utilities_1.BaseComponent));
FocusZone.defaultProps = {
isCircularNavigation: false,
direction: FocusZone_Props_1.FocusZoneDirection.bidirectional
};
__decorate([
Utilities_1.autobind
], FocusZone.prototype, "_onFocus", null);
__decorate([
Utilities_1.autobind
], FocusZone.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], FocusZone.prototype, "_onKeyDown", null);
exports.FocusZone = FocusZone;
//# sourceMappingURL=FocusZone.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var FocusZone_Photos_Example_1 = require("./examples/FocusZone.Photos.Example");
var FocusZone_List_Example_1 = require("./examples/FocusZone.List.Example");
var FocusZone_Disabled_Example_1 = require("./examples/FocusZone.Disabled.Example");
var FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx');
var FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx');
var FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx');
var FocusZonePage = (function (_super) {
__extends(FocusZonePage, _super);
function FocusZonePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
FocusZonePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'FocusZone', componentName: 'FocusZoneExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Non-uniform photos within bidirectional FocusZone', code: FocusZonePhotosExampleCode },
React.createElement(FocusZone_Photos_Example_1.FocusZonePhotosExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nesting FocusZones in list rows', code: FocusZoneListExampleCode },
React.createElement(FocusZone_List_Example_1.FocusZoneListExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Disabled FocusZone', code: FocusZoneDisabledExampleCode },
React.createElement(FocusZone_Disabled_Example_1.FocusZoneDisabledExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current \"active\" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element."),
React.createElement("p", null, "Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return FocusZonePage;
}(React.Component));
exports.FocusZonePage = FocusZonePage;
//# sourceMappingURL=FocusZonePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 12 12 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./FocusZone")); __export(require("./FocusZone.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| GroupFooter.js | 23.08% | (9 / 39) | 18.42% | (7 / 38) | 10% | (1 / 10) | 27.27% | (9 / 33) | |
| GroupFooter.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| GroupHeader.js | 11.54% | (9 / 78) | 8.75% | (7 / 80) | 7.69% | (1 / 13) | 12.5% | (9 / 72) | |
| GroupHeader.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| GroupSpacer.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 42.86% | (3 / 7) | |
| GroupSpacer.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| GroupedList.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| GroupedList.js | 6.92% | (9 / 130) | 7.37% | (7 / 95) | 4.35% | (1 / 23) | 7.32% | (9 / 123) | |
| GroupedList.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| GroupedListPage.js | 30.77% | (8 / 26) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 34.78% | (8 / 23) | |
| GroupedListSection.js | 7.46% | (10 / 134) | 7.94% | (10 / 126) | 3.7% | (1 / 27) | 7.94% | (10 / 126) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Link_1 = require("../../Link");
var GroupSpacer_1 = require("./GroupSpacer");
var styles = require("./GroupFooter.scss");
var GroupFooter = (function (_super) {
__extends(GroupFooter, _super);
function GroupFooter() {
return _super !== null && _super.apply(this, arguments) || this;
}
GroupFooter.prototype.render = function () {
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, showAllLinkText = _a.showAllLinkText;
return group && (React.createElement("div", { className: Utilities_1.css('ms-groupFooter', styles.root) },
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
React.createElement(Link_1.Link, { onClick: this._onSummarizeClick }, showAllLinkText)));
};
GroupFooter.prototype._onSummarizeClick = function (ev) {
this.props.onToggleSummarize(this.props.group);
ev.stopPropagation();
ev.preventDefault();
};
return GroupFooter;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], GroupFooter.prototype, "_onSummarizeClick", null);
exports.GroupFooter = GroupFooter;
//# sourceMappingURL=GroupFooter.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_6007e5f1',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_6007e5f1{position:relative;padding:10px 84px;cursor:pointer}.root_6007e5f1 .ms-Link{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=GroupFooter.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var index_1 = require("../../utilities/selection/index");
var Check_1 = require("../../Check");
var Icon_1 = require("../../Icon");
var GroupSpacer_1 = require("./GroupSpacer");
var Spinner_1 = require("../../Spinner");
var FocusZone_1 = require("../../FocusZone");
var styles = require("./GroupHeader.scss");
var GroupHeader = (function (_super) {
__extends(GroupHeader, _super);
function GroupHeader(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isCollapsed: _this.props.group && _this.props.group.isCollapsed,
isLoadingVisible: false
};
return _this;
}
GroupHeader.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.group) {
var newCollapsed = newProps.group.isCollapsed;
var isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
this.setState({
isCollapsed: newCollapsed,
isLoadingVisible: newLoadingVisible
});
}
};
GroupHeader.prototype.render = function () {
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, selected = _a.selected, isCollapsedGroupSelectVisible = _a.isCollapsedGroupSelectVisible;
var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
if (isCollapsedGroupSelectVisible === undefined) {
isCollapsedGroupSelectVisible = true;
}
var canSelectGroup = selectionMode === index_1.SelectionMode.multiple;
var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
var currentlySelected = isSelected || selected;
return group && (React.createElement("div", { className: Utilities_1.css('ms-GroupHeader', styles.root, (_c = {},
_c['is-selected ' + styles.rootIsSelected] = currentlySelected,
_c)), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true },
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
isSelectionCheckVisible ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-check', styles.check), "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick },
React.createElement(Check_1.Check, { checked: currentlySelected }))) : (selectionMode !== index_1.SelectionMode.none ? GroupSpacer_1.GroupSpacer({ count: 1 }) : null),
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-dropIcon', styles.dropIcon) },
React.createElement(Icon_1.Icon, { iconName: 'Tag' })),
React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-expand', styles.expand), onClick: this._onToggleCollapse },
React.createElement(Icon_1.Icon, { className: Utilities_1.css(isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)), iconName: 'ChevronDown' })),
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-title ms-font-xl', styles.title) },
React.createElement("span", null, group.name),
React.createElement("span", null,
"(",
group.count,
group.hasMoreData && '+',
")")),
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-loading', styles.loading, isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)) },
React.createElement(Spinner_1.Spinner, { label: loadingText })))));
var _c;
};
GroupHeader.prototype._onToggleCollapse = function (ev) {
var _a = this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;
var isCollapsed = this.state.isCollapsed;
var newCollapsed = !isCollapsed;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);
this.setState({
isCollapsed: newCollapsed,
isLoadingVisible: newLoadingVisible
});
if (onToggleCollapse) {
onToggleCollapse(group);
}
ev.stopPropagation();
ev.preventDefault();
};
GroupHeader.prototype._onToggleSelectGroupClick = function (ev) {
var _a = this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;
if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
ev.preventDefault();
ev.stopPropagation();
};
GroupHeader.prototype._onHeaderClick = function () {
var _a = this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;
if (onGroupHeaderClick) {
onGroupHeaderClick(group);
}
else if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
};
return GroupHeader;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], GroupHeader.prototype, "_onToggleCollapse", null);
__decorate([
Utilities_1.autobind
], GroupHeader.prototype, "_onToggleSelectGroupClick", null);
__decorate([
Utilities_1.autobind
], GroupHeader.prototype, "_onHeaderClick", null);
exports.GroupHeader = GroupHeader;
//# sourceMappingURL=GroupHeader.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_42b4e1bd',
rootIsSelected: 'rootIsSelected_42b4e1bd',
check: 'check_42b4e1bd',
expand: 'expand_42b4e1bd',
title: 'title_42b4e1bd',
expandIsCollapsed: 'expandIsCollapsed_42b4e1bd',
loading: 'loading_42b4e1bd',
loadingIsVisible: 'loadingIsVisible_42b4e1bd',
dropIcon: 'dropIcon_42b4e1bd',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_42b4e1bd{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_42b4e1bd::-moz-focus-inner{border:0}.root_42b4e1bd{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_42b4e1bd:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.root_42b4e1bd:hover{background:" }, { "theme": "themeLighterAlt", "defaultValue": "#eff6fc" }, { "rawString": "}.root_42b4e1bd.rootIsSelected_42b4e1bd{background:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_42b4e1bd.rootIsSelected_42b4e1bd:hover{background:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.check_42b4e1bd,.expand_42b4e1bd{display:inline-block;cursor:default;padding:6px;-webkit-transform:translateY(50%);transform:translateY(50%);margin-top:-12px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;font-size:12px;top:4px}.check_42b4e1bd::-moz-focus-inner,.expand_42b4e1bd::-moz-focus-inner{border:0}.check_42b4e1bd,.expand_42b4e1bd{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_42b4e1bd:focus:after,.ms-Fabric.is-focusVisible .expand_42b4e1bd:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.check_42b4e1bd{opacity:0;margin-top:-10px}.check_42b4e1bd:focus{opacity:1}.root_42b4e1bd.rootIsSelected_42b4e1bd .check_42b4e1bd,.root_42b4e1bd:hover .check_42b4e1bd{opacity:1}.title_42b4e1bd{padding:14px 6px;display:inline-block;cursor:pointer;outline:0}.expand_42b4e1bd{width:36px;height:40px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.expand_42b4e1bd .ms-Icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.expand_42b4e1bd .ms-Icon.expandIsCollapsed_42b4e1bd{-webkit-transform:rotate(0);transform:rotate(0)}.loading_42b4e1bd{display:inline-block;visibility:hidden;opacity:0;padding:0 16px;vertical-align:middle;transition:visibility 367ms,opacity 367ms}.loading_42b4e1bd.loadingIsVisible_42b4e1bd{visibility:visible;opacity:1}.dropIcon_42b4e1bd{display:inline-block;position:relative;top:-16px;font-size:20px;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";transition:opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);opacity:0;-webkit-transform:rotate(.2deg) scale(.65);transform:rotate(.2deg) scale(.65);-webkit-transform-origin:10px 10px;transform-origin:10px 10px}html[dir=ltr] .dropIcon_42b4e1bd{left:-26px}html[dir=rtl] .dropIcon_42b4e1bd{right:-26px}.dropIcon_42b4e1bd .ms-Icon--Tag{position:absolute}.ms-GroupedList-group.is-dropping>.root_42b4e1bd .dropIcon_42b4e1bd{transition:opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition-delay:367ms;opacity:1;-webkit-transform:rotate(.2deg) scale(1);transform:rotate(.2deg) scale(1)}.ms-GroupedList-group.is-dropping .check_42b4e1bd{opacity:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=GroupHeader.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var styles = require("./GroupSpacer.scss");
var SPACER_WIDTH = 36;
exports.GroupSpacer = function (props) {
return props.count > 0 && (React.createElement("span", { className: Utilities_1.css('ms-GroupSpacer', styles.root), style: { width: props.count * SPACER_WIDTH } }));
};
//# sourceMappingURL=GroupSpacer.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_09bd7717',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_09bd7717{display:inline-block}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=GroupSpacer.scss.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=GroupedList.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var GroupedListSection_1 = require("./GroupedListSection");
var List_1 = require("../../List");
var index_1 = require("../../utilities/selection/index");
var styles = require("./GroupedList.scss");
var GroupedList = (function (_super) {
__extends(GroupedList, _super);
function GroupedList(props) {
var _this = _super.call(this, props) || this;
_this._isSomeGroupExpanded = _this._computeIsSomeGroupExpanded(props.groups);
_this.state = {
lastWidth: 0,
groups: props.groups
};
return _this;
}
GroupedList.prototype.componentWillReceiveProps = function (newProps) {
var _a = this.props, groups = _a.groups, selectionMode = _a.selectionMode;
var shouldForceUpdates = false;
if (newProps.groups !== groups) {
this.setState({ groups: newProps.groups });
shouldForceUpdates = true;
}
if (newProps.selectionMode !== selectionMode) {
shouldForceUpdates = true;
}
if (shouldForceUpdates) {
this._forceListUpdates();
}
};
GroupedList.prototype.render = function () {
var className = this.props.className;
var groups = this.state.groups;
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-GroupedList', styles.root, className), "data-automationid": 'GroupedList', "data-is-scrollable": 'false', role: 'grid' }, !groups ?
this._renderGroup(null, 0) : (React.createElement(List_1.List, { ref: 'list', items: groups, onRenderCell: this._renderGroup, getItemCountForPage: function () { return 1; } }))));
};
GroupedList.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this._forceListUpdates();
};
GroupedList.prototype.toggleCollapseAll = function (allCollapsed) {
var groups = this.state.groups;
var groupProps = this.props.groupProps;
var onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
if (groups) {
if (onToggleCollapseAll) {
onToggleCollapseAll(allCollapsed);
}
for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) {
groups[groupIndex].isCollapsed = allCollapsed;
}
this._updateIsSomeGroupExpanded();
this.forceUpdate();
}
};
GroupedList.prototype._renderGroup = function (group, groupIndex) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, groupProps = _a.groupProps, items = _a.items, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selectionMode = _a.selectionMode, selection = _a.selection, viewport = _a.viewport;
// override group header/footer props as needed
var dividerProps = {
onToggleSelectGroup: this._onToggleSelectGroup,
onToggleCollapse: this._onToggleCollapse,
onToggleSummarize: this._onToggleSummarize
};
var headerProps = Utilities_1.assign({}, groupProps.headerProps, dividerProps);
var footerProps = Utilities_1.assign({}, groupProps.footerProps, dividerProps);
var groupNestingDepth = this._getGroupNestingDepth();
return (!group || group.count > 0) ? (React.createElement(GroupedListSection_1.GroupedListSection, { ref: 'group_' + groupIndex, key: this._getGroupKey(group, groupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: groupProps && groupProps.getGroupItemLimit, group: group, groupIndex: groupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, listProps: listProps, items: items, onRenderCell: onRenderCell, onRenderGroupHeader: groupProps.onRenderHeader, onRenderGroupFooter: groupProps.onRenderFooter, selectionMode: selectionMode, selection: selection, viewport: viewport })) : null;
};
GroupedList.prototype._getGroupKey = function (group, index) {
return 'group-' + ((group && group.key) ? group.key : String(index));
};
GroupedList.prototype._getGroupNestingDepth = function () {
var groups = this.state.groups;
var level = 0;
var groupsInLevel = groups;
while (groupsInLevel && groupsInLevel.length > 0) {
level++;
groupsInLevel = groupsInLevel[0].children;
}
return level;
};
GroupedList.prototype._onToggleCollapse = function (group) {
var groupProps = this.props.groupProps;
var onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
if (group) {
if (onToggleCollapse) {
onToggleCollapse(group);
}
group.isCollapsed = !group.isCollapsed;
this._updateIsSomeGroupExpanded();
this.forceUpdate();
}
};
GroupedList.prototype._onToggleSelectGroup = function (group) {
if (group) {
this.props.selection.toggleRangeSelected(group.startIndex, group.count);
}
};
GroupedList.prototype._forceListUpdates = function (groups) {
groups = groups || this.state.groups;
var groupCount = groups ? groups.length : 1;
if (this.refs.list) {
this.refs.list.forceUpdate();
for (var i = 0; i < groupCount; i++) {
var group = this.refs.list.refs['group_' + String(i)];
if (group) {
group.forceListUpdate();
}
}
}
else {
var group = this.refs['group_' + String(0)];
if (group) {
group.forceListUpdate();
}
}
};
GroupedList.prototype._onToggleSummarize = function (group) {
var groupProps = this.props.groupProps;
var onToggleSummarize = groupProps && groupProps.footerProps && groupProps.footerProps.onToggleSummarize;
if (onToggleSummarize) {
onToggleSummarize(group);
}
else {
if (group) {
group.isShowingAll = !group.isShowingAll;
}
this.forceUpdate();
}
};
GroupedList.prototype._computeIsSomeGroupExpanded = function (groups) {
var _this = this;
return groups && groups.some(function (group) { return group.children ? _this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed; });
};
GroupedList.prototype._updateIsSomeGroupExpanded = function () {
var groups = this.state.groups;
var onGroupExpandStateChanged = this.props.onGroupExpandStateChanged;
var newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);
if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) {
if (onGroupExpandStateChanged) {
onGroupExpandStateChanged(newIsSomeGroupExpanded);
}
this._isSomeGroupExpanded = newIsSomeGroupExpanded;
}
};
return GroupedList;
}(Utilities_1.BaseComponent));
GroupedList.defaultProps = {
selectionMode: index_1.SelectionMode.multiple,
isHeaderVisible: true,
groupProps: {}
};
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_renderGroup", null);
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_onToggleCollapse", null);
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_onToggleSelectGroup", null);
__decorate([
Utilities_1.autobind
], GroupedList.prototype, "_onToggleSummarize", null);
exports.GroupedList = GroupedList;
//# sourceMappingURL=GroupedList.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_5dfb4d97',
group: 'group_5dfb4d97',
groupIsDropping: 'groupIsDropping_5dfb4d97',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_5dfb4d97{position:relative;font-size:12px}.root_5dfb4d97 BUTTON{font-family:inherit;background-color:transparent}.group_5dfb4d97{transition:background-color 267ms cubic-bezier(.445,.05,.55,.95)}.groupIsDropping_5dfb4d97{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_5dfb4d97 .ms-List-cell{min-height:38px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=GroupedList.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var GroupedList_Basic_Example_1 = require("./examples/GroupedList.Basic.Example");
var GroupedList_Custom_Example_1 = require("./examples/GroupedList.Custom.Example");
var GroupedListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Basic.Example.tsx');
var GroupedListCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx');
var GroupedListPage = (function (_super) {
__extends(GroupedListPage, _super);
function GroupedListPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
GroupedListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'GroupedList', componentName: 'GroupedListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'GroupedList basic example', isOptIn: true, code: GroupedListBasicExampleCode },
React.createElement(GroupedList_Basic_Example_1.GroupedListBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'GroupedList example with custom header and footer', isOptIn: true, code: GroupedListCustomExampleCode },
React.createElement(GroupedList_Custom_Example_1.GroupedListCustomExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/GroupedList.Props.ts')
] }), overview: React.createElement("p", null, "Allows you to render a set of items as multiple lists with various grouping properties."), isHeaderVisible: this.props.isHeaderVisible }));
};
return GroupedListPage;
}(React.Component));
exports.GroupedListPage = GroupedListPage;
//# sourceMappingURL=GroupedListPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 | 2 2 2 1 2 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var index_1 = require("../../utilities/selection/index");
var GroupFooter_1 = require("./GroupFooter");
var GroupHeader_1 = require("./GroupHeader");
var List_1 = require("../../List");
var Utilities_2 = require("../../Utilities");
var styles = require("./GroupedList.scss");
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var GroupedListSection = (function (_super) {
__extends(GroupedListSection, _super);
function GroupedListSection(props) {
var _this = _super.call(this, props) || this;
var selection = props.selection, group = props.group;
_this._subGroups = {};
_this.state = {
isDropping: false,
isSelected: (selection && group) ? selection.isRangeSelected(group.startIndex, group.count) : false
};
return _this;
}
GroupedListSection.prototype.componentDidMount = function () {
var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection;
if (dragDropHelper) {
this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
}
if (selection) {
this._events.on(selection, index_1.SELECTION_CHANGE, this._onSelectionChange);
}
};
GroupedListSection.prototype.componentWillUnmount = function () {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
}
};
GroupedListSection.prototype.componentDidUpdate = function (previousProps) {
if (this.props.group !== previousProps.group ||
this.props.groupIndex !== previousProps.groupIndex ||
this.props.dragDropHelper !== previousProps.dragDropHelper) {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
}
}
};
GroupedListSection.prototype.render = function () {
var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupFooter, onRenderGroupFooter = _c === void 0 ? this._onRenderGroupFooter : _c;
var isSelected = this.state.isSelected;
var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
var isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll &&
(group.count > renderCount || group.hasMoreData);
var hasNestedGroups = group && group.children && group.children.length > 0;
var dividerProps = {
group: group,
groupIndex: groupIndex,
groupLevel: group ? group.level : 0,
isSelected: isSelected,
viewport: viewport,
selectionMode: selectionMode
};
var groupHeaderProps = Utilities_2.assign({}, headerProps, dividerProps);
var groupFooterProps = Utilities_2.assign({}, footerProps, dividerProps);
return (React.createElement("div", { ref: 'root', className: Utilities_2.css('ms-GroupedList-group', styles.group, this._getDroppingClassName()) },
onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader),
group && group.isCollapsed ?
null :
(hasNestedGroups ?
(React.createElement(List_1.List, { ref: 'list', items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: function () { return 1; } })) :
this._onRenderGroup(renderCount)),
isFooterVisible && onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter)));
};
GroupedListSection.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this.forceListUpdate();
};
GroupedListSection.prototype.forceListUpdate = function () {
var group = this.props.group;
if (this.refs.list) {
this.refs.list.forceUpdate();
if (group && group.children && group.children.length > 0) {
var subGroupCount = group.children.length;
for (var i = 0; i < subGroupCount; i++) {
var subGroup = this.refs.list.refs['subGroup_' + String(i)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
}
}
else {
var subGroup = this.refs['subGroup_' + String(0)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
};
GroupedListSection.prototype._onRenderGroupHeader = function (props) {
return React.createElement(GroupHeader_1.GroupHeader, __assign({}, props));
};
GroupedListSection.prototype._onRenderGroupFooter = function (props) {
return React.createElement(GroupFooter_1.GroupFooter, __assign({}, props));
};
GroupedListSection.prototype._onSelectionChange = function () {
var _a = this.props, group = _a.group, selection = _a.selection;
var isSelected = selection.isRangeSelected(group.startIndex, group.count);
if (isSelected !== this.state.isSelected) {
this.setState({ isSelected: isSelected });
}
};
GroupedListSection.prototype._onRenderGroup = function (renderCount) {
var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth;
var count = group ? group.count : items.length;
var startIndex = group ? group.startIndex : 0;
return (React.createElement(List_1.List, __assign({ items: items, onRenderCell: function (item, itemIndex) { return onRenderCell(groupNestingDepth, item, itemIndex); }, ref: 'list', renderCount: Math.min(count, renderCount), startIndex: startIndex }, listProps)));
};
GroupedListSection.prototype._renderSubGroup = function (subGroup, subGroupIndex) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, items = _a.items, headerProps = _a.headerProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupFooter = _a.onRenderGroupFooter;
return (!subGroup || subGroup.count > 0) ? (React.createElement(GroupedListSection, { ref: 'subGroup_' + subGroupIndex, key: this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupFooter: onRenderGroupFooter })) : null;
};
GroupedListSection.prototype._getGroupKey = function (group, index) {
return 'group-' + ((group && group.key) ? group.key : String(group.level) + String(index));
};
/**
* collect all the data we need to enable drag/drop for a group
*/
GroupedListSection.prototype._getGroupDragDropOptions = function () {
var _a = this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
var options = {
eventMap: eventsToRegister,
selectionIndex: -1,
context: { data: group, index: groupIndex, isGroup: true },
canDrag: function () { return false; },
canDrop: dragDropEvents.canDrop,
onDragStart: null,
updateDropState: this._updateDroppingState
};
return options;
};
/**
* update groupIsDropping state based on the input value, which is used to change style during drag and drop
*
* @private
* @param {boolean} newValue (new isDropping state value)
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
*/
GroupedListSection.prototype._updateDroppingState = function (newIsDropping, event) {
var isDropping = this.state.isDropping;
var dragDropEvents = this.props.dragDropEvents;
if (!isDropping) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(event, null);
}
}
else {
if (dragDropEvents.onDragEnter) {
dragDropEvents.onDragEnter(event, null);
}
}
if (isDropping !== newIsDropping) {
this.setState({ isDropping: newIsDropping });
}
};
/**
* get the correct css class to reflect the dropping state for a given group
*
* If the group is the current drop target, return the default dropping class name
* Otherwise, return '';
*
*/
GroupedListSection.prototype._getDroppingClassName = function () {
var isDropping = this.state.isDropping;
var group = this.props.group;
isDropping = !!(group && isDropping);
return Utilities_2.css(isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && styles.groupIsDropping);
};
return GroupedListSection;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_onRenderGroupHeader", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_onRenderGroupFooter", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_renderSubGroup", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_getGroupDragDropOptions", null);
__decorate([
Utilities_1.autobind
], GroupedListSection.prototype, "_updateDroppingState", null);
exports.GroupedListSection = GroupedListSection;
//# sourceMappingURL=GroupedListSection.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./GroupedList")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Icon.Props.js | 100% | (7 / 7) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (7 / 7) | |
| Icon.js | 19.05% | (4 / 21) | 21.43% | (3 / 14) | 0% | (0 / 2) | 20% | (4 / 20) | |
| Icon.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| IconName.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| IconPage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Please keep alphabetized
var IconType;
(function (IconType) {
/**
* Render using the fabric icon font.
*/
IconType[IconType["default"] = 0] = "default";
/**
* Render using an image, where imageProps would be used.
*/
IconType[IconType["image"] = 1] = "image";
/**
* Deprecated, use default.
* @deprecated
*/
IconType[IconType["Default"] = 100000] = "Default";
/**
* Deprecated, use image.
* @deprecated
*/
IconType[IconType["Image"] = 100001] = "Image";
})(IconType = exports.IconType || (exports.IconType = {}));
//# sourceMappingURL=Icon.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 6 6 6 6 | "use strict"; var __assign = (this && this.__assign) || Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable */ var React = require("react"); var styles = require("./Icon.scss"); /* tslint:enable */ var Icon_Props_1 = require("./Icon.Props"); var Image_1 = require("../Image/Image"); var Utilities_1 = require("../../Utilities"); exports.Icon = function (props) { var customIcon = props.iconName === 'None'; var iconClassName = props.iconName ? ('ms-Icon--' + props.iconName) : ''; if (props.iconType === Icon_Props_1.IconType.image || props.iconType === Icon_Props_1.IconType.Image) { var containerClassName = Utilities_1.css('ms-Icon', 'ms-Icon-imageContainer', styles.imageContainer, props.className); return (React.createElement("div", { className: containerClassName }, React.createElement(Image_1.Image, __assign({}, props.imageProps)))); } else { var className = Utilities_1.css('ms-Icon', customIcon ? '' : iconClassName, props.className); return React.createElement("i", __assign({}, Utilities_1.getNativeProps(props, Utilities_1.htmlElementProperties), { className: className })); } }; //# sourceMappingURL=Icon.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 8 8 8 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
imageContainer: 'imageContainer_0bf24413',
};
load_themed_styles_1.loadStyles([{ "rawString": ".imageContainer_0bf24413{overflow:hidden}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Icon.scss.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=IconName.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Icon_Basic_Example_1 = require("./examples/Icon.Basic.Example");
var Icon_Color_Example_1 = require("./examples/Icon.Color.Example");
var Icon_ImageSheet_Example_1 = require("./examples/Icon.ImageSheet.Example");
var IconBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx');
var IconColorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx');
var IconImageSheetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx');
var IconPage = (function (_super) {
__extends(IconPage, _super);
function IconPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
IconPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Icon', componentName: 'IconExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon', code: IconBasicExampleCode },
React.createElement(Icon_Basic_Example_1.IconBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon with custom color', code: IconColorExampleCode },
React.createElement(Icon_Color_Example_1.IconColorExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Icon using image sheet', code: IconImageSheetExampleCode },
React.createElement(Icon_ImageSheet_Example_1.IconImageSheetExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Icon/Icon.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "In a computer's graphical user interface ( GUI ), an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image such as a company's logo.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Adjust to proper size to highlight importance but not occupying too much space."),
React.createElement("li", null, "Be simple and concise."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Icons to show pictures."),
React.createElement("li", null, "Use photos or long sentences as icons."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return IconPage;
}(React.Component));
exports.IconPage = IconPage;
//# sourceMappingURL=IconPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Icon")); __export(require("./Icon.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Image.Props.js | 100% | (13 / 13) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (13 / 13) | |
| Image.js | 10% | (10 / 100) | 10.42% | (10 / 96) | 5.88% | (1 / 17) | 10.75% | (10 / 93) | |
| Image.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| ImagePage.js | 22.86% | (8 / 35) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 25% | (8 / 32) | |
| ImagePage.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* The possible methods that can be used to fit the image.
*/
var ImageFit;
(function (ImageFit) {
/**
* The image is not scaled. The image is centered and cropped within the content box.
*/
ImageFit[ImageFit["center"] = 0] = "center";
/**
* The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will
* be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of
* the frame will be empty depending on the difference in aspect ratio between the image and the frame.
*/
ImageFit[ImageFit["contain"] = 1] = "contain";
/**
* The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped from
* the top and bottom, or from the sides, depending on the difference in aspect ratio between the image and the frame.
*/
ImageFit[ImageFit["cover"] = 2] = "cover";
/**
* Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the
* frame will have empty space.
*/
ImageFit[ImageFit["none"] = 3] = "none";
})(ImageFit = exports.ImageFit || (exports.ImageFit = {}));
var ImageLoadState;
(function (ImageLoadState) {
/**
* The image has not yet been loaded, and there is no error yet.
*/
ImageLoadState[ImageLoadState["notLoaded"] = 0] = "notLoaded";
/**
* The image has been loaded successfully.
*/
ImageLoadState[ImageLoadState["loaded"] = 1] = "loaded";
/**
* An error has been encountered while loading the image.
*/
ImageLoadState[ImageLoadState["error"] = 2] = "error";
/**
* Deprecated at v1.3.6, to replace the src in case of errors, use onLoadingStateChange instead
* and rerender the Image with a difference src.
* @deprecated
*/
ImageLoadState[ImageLoadState["errorLoaded"] = 3] = "errorLoaded";
})(ImageLoadState = exports.ImageLoadState || (exports.ImageLoadState = {}));
//# sourceMappingURL=Image.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | 16 16 16 1 16 16 16 16 16 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Image_Props_1 = require("./Image.Props");
var styles = require("./Image.scss");
var CoverStyle;
(function (CoverStyle) {
CoverStyle[CoverStyle["landscape"] = 0] = "landscape";
CoverStyle[CoverStyle["portrait"] = 1] = "portrait";
})(CoverStyle = exports.CoverStyle || (exports.CoverStyle = {}));
exports.CoverStyleMap = (_a = {},
_a[CoverStyle.landscape] = 'ms-Image-image--landscape ' + styles.imageIsLandscape,
_a[CoverStyle.portrait] = 'ms-Image-image--portrait ' + styles.imageIsPortrait,
_a);
exports.ImageFitMap = (_b = {},
_b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center ' + styles.imageIsCenter,
_b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain ' + styles.imageIsContain,
_b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover ' + styles.imageIsCover,
_b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none ' + styles.imageIsNone,
_b);
var KEY_PREFIX = 'fabricImage';
var Image = (function (_super) {
__extends(Image, _super);
function Image(props) {
var _this = _super.call(this, props) || this;
// Make an initial assumption about the image layout until we can
// check the rendered element. The value here only takes effect when
// shouldStartVisible is true.
_this._coverStyle = CoverStyle.portrait;
_this.state = {
loadState: Image_Props_1.ImageLoadState.notLoaded
};
return _this;
}
Image.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.src !== this.props.src) {
this.setState({
loadState: Image_Props_1.ImageLoadState.notLoaded
});
}
else if (this.state.loadState === Image_Props_1.ImageLoadState.loaded) {
this._computeCoverStyle(nextProps);
}
};
Image.prototype.componentDidUpdate = function (prevProps, prevState) {
this._checkImageLoaded();
if (this.props.onLoadingStateChange
&& prevState.loadState !== this.state.loadState) {
this.props.onLoadingStateChange(this.state.loadState);
}
};
Image.prototype.render = function () {
var imageProps = Utilities_1.getNativeProps(this.props, Utilities_1.imageProperties, ['width', 'height']);
var _a = this.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, shouldFadeIn = _a.shouldFadeIn, className = _a.className, imageFit = _a.imageFit, role = _a.role, maximizeFrame = _a.maximizeFrame;
var loadState = this.state.loadState;
var coverStyle = this._coverStyle;
var loaded = loadState === Image_Props_1.ImageLoadState.loaded || (loadState === Image_Props_1.ImageLoadState.notLoaded && this.props.shouldStartVisible);
// If image dimensions aren't specified, the natural size of the image is used.
return (React.createElement("div", { className: Utilities_1.css('ms-Image', styles.root, className, (_b = {},
_b['ms-Image--maximizeFrame ' + styles.rootIsMaximizeFrame] = maximizeFrame,
_b)), style: { width: width, height: height }, ref: this._resolveRef('_frameElement') },
React.createElement("img", __assign({}, imageProps, { onLoad: this._onImageLoaded, onError: this._onImageError, key: KEY_PREFIX + this.props.src || '', className: Utilities_1.css('ms-Image-image', styles.image, exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], (_c = {
'is-fadeIn': shouldFadeIn,
'is-notLoaded': !loaded
},
_c['is-loaded ' + styles.imageIsLoaded] = loaded,
_c['ms-u-fadeIn400'] = loaded && shouldFadeIn,
_c['is-error'] = loadState === Image_Props_1.ImageLoadState.error,
_c['ms-Image-image--scaleWidth ' + styles.imageIsScaleWidth] = (imageFit === undefined && !!width && !height),
_c['ms-Image-image--scaleHeight ' + styles.imageIsScaleHeight] = (imageFit === undefined && !width && !!height),
_c['ms-Image-image--scaleWidthHeight ' + styles.imageIsScaleWidthHeight] = (imageFit === undefined && !!width && !!height),
_c)), ref: this._resolveRef('_imageElement'), src: src, alt: alt, role: role }))));
var _b, _c;
};
Image.prototype._onImageLoaded = function (ev) {
var _a = this.props, src = _a.src, onLoad = _a.onLoad;
if (onLoad) {
onLoad(ev);
}
this._computeCoverStyle(this.props);
if (src) {
this.setState({
loadState: Image_Props_1.ImageLoadState.loaded
});
}
};
Image.prototype._checkImageLoaded = function () {
var src = this.props.src;
var loadState = this.state.loadState;
if (loadState === Image_Props_1.ImageLoadState.notLoaded) {
// testing if naturalWidth and naturalHeight are greater than zero is better than checking
// .complete, because .complete will also be set to true if the image breaks. However,
// for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back
// to checking .complete for these images.
var isLoaded = src && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) ||
(this._imageElement.complete && Image._svgRegex.test(src));
if (isLoaded) {
this._computeCoverStyle(this.props);
this.setState({
loadState: Image_Props_1.ImageLoadState.loaded
});
}
}
};
Image.prototype._computeCoverStyle = function (props) {
var imageFit = props.imageFit, width = props.width, height = props.height;
if (imageFit === Image_Props_1.ImageFit.cover || imageFit === Image_Props_1.ImageFit.contain) {
if (this._imageElement) {
// Determine the desired ratio using the width and height props.
// If those props aren't available, measure measure the frame.
var desiredRatio = void 0;
if (!!width && !!height) {
desiredRatio = width / height;
}
else {
desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
}
// Examine the source image to determine its original ratio.
var naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
// Should we crop from the top or the sides?
if (naturalRatio > desiredRatio) {
this._coverStyle = CoverStyle.landscape;
}
else {
this._coverStyle = CoverStyle.portrait;
}
}
}
};
Image.prototype._onImageError = function (ev) {
if (this.props.onError) {
this.props.onError(ev);
}
this.setState({
loadState: Image_Props_1.ImageLoadState.error
});
};
return Image;
}(Utilities_1.BaseComponent));
Image.defaultProps = {
shouldFadeIn: true
};
Image._svgRegex = /\.svg$/i;
__decorate([
Utilities_1.autobind
], Image.prototype, "_onImageLoaded", null);
__decorate([
Utilities_1.autobind
], Image.prototype, "_onImageError", null);
exports.Image = Image;
var _a, _b;
//# sourceMappingURL=Image.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_ea778207',
rootIsMaximizeFrame: 'rootIsMaximizeFrame_ea778207',
image: 'image_ea778207',
imageIsLoaded: 'imageIsLoaded_ea778207',
imageIsCenter: 'imageIsCenter_ea778207',
imageIsContain: 'imageIsContain_ea778207',
imageIsCover: 'imageIsCover_ea778207',
imageIsLandscape: 'imageIsLandscape_ea778207',
imageIsPortrait: 'imageIsPortrait_ea778207',
imageIsNone: 'imageIsNone_ea778207',
imageIsScaleWidthHeight: 'imageIsScaleWidthHeight_ea778207',
imageIsScaleWidth: 'imageIsScaleWidth_ea778207',
imageIsScaleHeight: 'imageIsScaleHeight_ea778207',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_ea778207{overflow:hidden}.rootIsMaximizeFrame_ea778207{height:100%;width:100%}.image_ea778207{display:block;opacity:0}.image_ea778207.imageIsLoaded_ea778207{opacity:1}.imageIsCenter_ea778207,.imageIsContain_ea778207,.imageIsCover_ea778207{position:relative;top:50%}html[dir=ltr] .imageIsCenter_ea778207,html[dir=ltr] .imageIsContain_ea778207,html[dir=ltr] .imageIsCover_ea778207{left:50%}html[dir=rtl] .imageIsCenter_ea778207,html[dir=rtl] .imageIsContain_ea778207,html[dir=rtl] .imageIsCover_ea778207{right:50%}html[dir=ltr] .imageIsCenter_ea778207,html[dir=ltr] .imageIsContain_ea778207,html[dir=ltr] .imageIsCover_ea778207{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}html[dir=rtl] .imageIsCenter_ea778207,html[dir=rtl] .imageIsContain_ea778207,html[dir=rtl] .imageIsCover_ea778207{-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.imageIsContain_ea778207.imageIsLandscape_ea778207{width:100%;height:auto}.imageIsContain_ea778207.imageIsPortrait_ea778207{height:100%;width:auto}.imageIsCover_ea778207.imageIsLandscape_ea778207{height:100%;width:auto}.imageIsCover_ea778207.imageIsPortrait_ea778207{width:100%;height:auto}.imageIsNone_ea778207{height:auto;width:auto}.imageIsScaleWidthHeight_ea778207{height:100%;width:100%}.imageIsScaleWidth_ea778207{height:auto;width:100%}.imageIsScaleHeight_ea778207{height:100%;width:auto}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Image.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
require("./ImagePage.scss");
var Image_Default_Example_1 = require("./examples/Image.Default.Example");
var Image_Center_Example_1 = require("./examples/Image.Center.Example");
var Image_Contain_Example_1 = require("./examples/Image.Contain.Example");
var Image_Cover_Example_1 = require("./examples/Image.Cover.Example");
var Image_None_Example_1 = require("./examples/Image.None.Example");
var Image_MaximizeFrame_Example_1 = require("./examples/Image.MaximizeFrame.Example");
var ImageDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx');
var ImageCenterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx');
var ImageContainExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx');
var ImageCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx');
var ImageNoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx');
var ImageMaximizeFrameExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx');
var ImagePage = (function (_super) {
__extends(ImagePage, _super);
function ImagePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ImagePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Image', componentName: 'ImageExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Not specified', code: ImageDefaultExampleCode },
React.createElement(Image_Default_Example_1.ImageDefaultExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: None', code: ImageNoneExampleCode },
React.createElement(Image_None_Example_1.ImageNoneExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Center', code: ImageCenterExampleCode },
React.createElement(Image_Center_Example_1.ImageCenterExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Contain', code: ImageContainExampleCode },
React.createElement(Image_Contain_Example_1.ImageContainExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Cover', code: ImageCoverExampleCode },
React.createElement(Image_Cover_Example_1.ImageCoverExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Maximizing the image frame', code: ImageMaximizeFrameExampleCode },
React.createElement(Image_MaximizeFrame_Example_1.ImageMaximizeFrameExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Image/Image.Props.ts')
] }), overview: React.createElement("div", null, "Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame."), isHeaderVisible: this.props.isHeaderVisible }));
};
return ImagePage;
}(React.Component));
exports.ImagePage = ImagePage;
//# sourceMappingURL=ImagePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {};
load_themed_styles_1.loadStyles([{ "rawString": ".ImageExample .ms-Image{border:2px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";margin-bottom:20px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ImagePage.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 14 14 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Image")); __export(require("./Image.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Label.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Label.js | 28.13% | (9 / 32) | 35% | (7 / 20) | 11.11% | (1 / 9) | 32.14% | (9 / 28) | |
| Label.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| LabelPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Label.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 12 12 12 1 12 12 12 12 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./Label.scss");
var Label = (function (_super) {
__extends(Label, _super);
function Label() {
return _super !== null && _super.apply(this, arguments) || this;
}
Label.prototype.render = function () {
var _a = this.props, disabled = _a.disabled, required = _a.required, children = _a.children, className = _a.className;
return (React.createElement("label", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: Utilities_1.css(styles.root, 'ms-Label', className, (_b = {
'is-disabled': disabled,
'is-required': required
},
_b[styles.isDisabled] = disabled,
_b[styles.isRequired] = required,
_b)) }), children));
var _b;
};
return Label;
}(Utilities_1.BaseComponent));
exports.Label = Label;
//# sourceMappingURL=Label.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_470d28ae',
isRequired: 'isRequired_470d28ae',
isDisabled: 'isDisabled_470d28ae',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_470d28ae{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";box-sizing:border-box;display:block;padding:5px 0;word-break:break-all}.isRequired_470d28ae::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.isDisabled_470d28ae{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Label.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Label_Basic_Example_1 = require("./examples/Label.Basic.Example");
var LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx');
var LabelPage = (function (_super) {
__extends(LabelPage, _super);
function LabelPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
LabelPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Label', componentName: 'LabelExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Label', code: LabelBasicExampleCode },
React.createElement(Label_Basic_Example_1.LabelBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Label/Label.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use sentence casing, e.g. \u201CFirst name\u201D."),
React.createElement("li", null, "Be short and concise."),
React.createElement("li", null, "When adding a Label to components, use the text as a noun or short noun phrase."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Labels as instructional text, e.g. \u201CClick to get started\u201D."),
React.createElement("li", null, "Don\u2019t use full sentences or complex punctuation (colons, semicolons, etc.)."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Label/Label.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return LabelPage;
}(React.Component));
exports.LabelPage = LabelPage;
//# sourceMappingURL=LabelPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 10 10 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Label")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Layer.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Layer.js | 10.71% | (9 / 84) | 10.26% | (4 / 39) | 5.26% | (1 / 19) | 11.39% | (9 / 79) | |
| Layer.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| LayerHost.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| LayerHost.js | 25% | (9 / 36) | 35% | (7 / 20) | 8.33% | (1 / 12) | 28.13% | (9 / 32) | |
| LayerPage.js | 30.77% | (8 / 26) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 34.78% | (8 / 23) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Layer.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
var ReactDOM = require("react-dom");
/* tslint:enable:no-unused-variable */
var Fabric_1 = require("../../Fabric");
var Utilities_1 = require("../../Utilities");
var styles = require("./Layer.scss");
var _layersByHostId = {};
var Layer = (function (_super) {
__extends(Layer, _super);
function Layer(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
onLayerMounted: 'onLayerDidMount'
});
if (_this.props.hostId) {
if (!_layersByHostId[_this.props.hostId]) {
_layersByHostId[_this.props.hostId] = [];
}
_layersByHostId[_this.props.hostId].push(_this);
}
return _this;
}
/**
* Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
* care about the specific host.
*/
Layer.notifyHostChanged = function (id) {
if (_layersByHostId[id]) {
_layersByHostId[id].forEach(function (layer) { return layer.forceUpdate(); });
}
};
Layer.prototype.componentDidMount = function () {
this.componentDidUpdate();
};
Layer.prototype.componentWillUnmount = function () {
var _this = this;
this._removeLayerElement();
if (this.props.hostId) {
_layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(function (layer) { return layer !== _this; });
if (!_layersByHostId[this.props.hostId].length) {
delete _layersByHostId[this.props.hostId];
}
}
};
Layer.prototype.componentDidUpdate = function () {
var _this = this;
var host = this._getHost();
if (host !== this._host) {
this._removeLayerElement();
}
if (host) {
this._host = host;
if (!this._layerElement) {
var doc = Utilities_1.getDocument(this._rootElement);
this._layerElement = doc.createElement('div');
this._layerElement.className = Utilities_1.css('ms-Layer', (_a = {},
_a['ms-Layer--fixed ' + styles.rootIsFixed] = !this.props.hostId,
_a));
host.appendChild(this._layerElement);
Utilities_1.setVirtualParent(this._layerElement, this._rootElement);
}
// Using this 'unstable' method allows us to retain the React context across the layer projection.
ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(Fabric_1.Fabric, { className: Utilities_1.css('ms-Layer-content', styles.content) }, this.props.children), this._layerElement, function () {
if (!_this._hasMounted) {
_this._hasMounted = true;
// TODO: @deprecated cleanup required.
if (_this.props.onLayerMounted) {
_this.props.onLayerMounted();
}
_this.props.onLayerDidMount();
}
});
}
var _a;
};
Layer.prototype.render = function () {
return (React.createElement("span", { className: 'ms-Layer', ref: this._resolveRef('_rootElement') }));
};
Layer.prototype._removeLayerElement = function () {
if (this._layerElement) {
this.props.onLayerWillUnmount();
ReactDOM.unmountComponentAtNode(this._layerElement);
var parentNode = this._layerElement.parentNode;
if (parentNode) {
parentNode.removeChild(this._layerElement);
}
this._layerElement = undefined;
this._hasMounted = false;
}
};
Layer.prototype._getHost = function () {
var hostId = this.props.hostId;
var doc = Utilities_1.getDocument(this._rootElement);
if (hostId) {
return doc.getElementById(hostId);
}
else {
return doc.body;
}
};
return Layer;
}(Utilities_1.BaseComponent));
Layer.defaultProps = {
onLayerDidMount: function () { return undefined; },
onLayerWillUnmount: function () { return undefined; }
};
exports.Layer = Layer;
//# sourceMappingURL=Layer.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
rootIsFixed: 'rootIsFixed_82167c81',
content: 'content_82167c81',
};
load_themed_styles_1.loadStyles([{ "rawString": ".rootIsFixed_82167c81{position:fixed;z-index:1000000;top:0;left:0;width:100vw;height:100vh;visibility:hidden}.content_82167c81{visibility:visible}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Layer.scss.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=LayerHost.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Layer_1 = require("./Layer");
var LayerHost = (function (_super) {
__extends(LayerHost, _super);
function LayerHost() {
return _super !== null && _super.apply(this, arguments) || this;
}
LayerHost.prototype.shouldComponentUpdate = function () {
return false;
};
LayerHost.prototype.componentDidMount = function () {
Layer_1.Layer.notifyHostChanged(this.props.id);
};
LayerHost.prototype.componentWillUnmount = function () {
Layer_1.Layer.notifyHostChanged(this.props.id);
};
LayerHost.prototype.render = function () {
return (React.createElement("div", __assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className) })));
};
return LayerHost;
}(Utilities_1.BaseComponent));
exports.LayerHost = LayerHost;
//# sourceMappingURL=LayerHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Layer_Basic_Example_1 = require("./examples/Layer.Basic.Example");
var Layer_Hosted_Example_1 = require("./examples/Layer.Hosted.Example");
var LayerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx');
var LayerHostedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx');
var LayerPage = (function (_super) {
__extends(LayerPage, _super);
function LayerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
LayerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Layer', componentName: 'LayerExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic layered content', code: LayerBasicExampleCode },
React.createElement(Layer_Basic_Example_1.LayerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Using LayerHost to control projection', code: LayerHostedExampleCode },
React.createElement(Layer_Hosted_Example_1.LayerHostedExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Layer/Layer.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Layer is a technical component that does not have specific Design guidance."),
React.createElement("p", null, "Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by \"overflow: hidden\" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else."),
React.createElement("p", null, "There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs ( ref={ (el) => { this._root = el; } ) rather than string refs ( ref='root' ). Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, 'Use functional refs ( ref={ (el) => { this._root = el; } ).'))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, 'Don\'t use string refs ( ref=\'root\' ).'))), isHeaderVisible: this.props.isHeaderVisible }));
};
return LayerPage;
}(React.Component));
exports.LayerPage = LayerPage;
//# sourceMappingURL=LayerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Layer")); __export(require("./LayerHost")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Link.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Link.js | 20.83% | (10 / 48) | 20.83% | (10 / 48) | 8.33% | (1 / 12) | 24.39% | (10 / 41) | |
| Link.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| LinkPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Link.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 18 18 18 1 18 18 18 18 18 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./Link.scss");
var Link = (function (_super) {
__extends(Link, _super);
function Link() {
return _super !== null && _super.apply(this, arguments) || this;
}
Link.prototype.render = function () {
var _a = this.props, disabled = _a.disabled, children = _a.children, className = _a.className, href = _a.href;
return (href ? (React.createElement("a", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.anchorProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_b = {
'is-disabled': disabled
},
_b[styles.isDisabled] = disabled,
_b[styles.isEnabled] = !disabled,
_b)), onClick: this._onClick, ref: this._resolveRef('_link'), target: this.props.target }), children)) : (React.createElement("button", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.buttonProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_c = {
'is-disabled': disabled
},
_c[styles.isDisabled] = disabled,
_c)), onClick: this._onClick, ref: this._resolveRef('_link') }), children)));
var _b, _c;
};
Link.prototype.focus = function () {
if (this._link) {
this._link.focus();
}
};
Link.prototype._onClick = function (ev) {
var onClick = this.props.onClick;
if (onClick) {
onClick(ev);
}
};
return Link;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], Link.prototype, "_onClick", null);
exports.Link = Link;
//# sourceMappingURL=Link.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_6388e252',
isEnabled: 'isEnabled_6388e252',
isDisabled: 'isDisabled_6388e252',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_6388e252{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin:0;overflow:inherit;padding:0;text-overflow:inherit}.isEnabled_6388e252:focus,.isEnabled_6388e252:hover{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.isEnabled_6388e252:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isDisabled_6388e252{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";pointer-events:none;cursor:default}button.root_6388e252{background:0 0;border:none;cursor:pointer;display:inline;font-size:inherit}button.root_6388e252::-moz-focus-inner{border:0}button.root_6388e252{outline:transparent;position:relative}.ms-Fabric.is-focusVisible button.root_6388e252:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] button.root_6388e252{text-align:left}html[dir=rtl] button.root_6388e252{text-align:right}a.root_6388e252{text-decoration:none}.ms-Fabric.is-focusVisible a.root_6388e252:focus{outline:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Link.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Link_Basic_Example_1 = require("./examples/Link.Basic.Example");
var LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx');
var LinkPage = (function (_super) {
__extends(LinkPage, _super);
function LinkPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
LinkPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Link', componentName: 'LinkExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Link', code: LinkBasicExampleCode },
React.createElement(Link_Basic_Example_1.LinkBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Link/Link.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter."),
React.createElement("p", null, "A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option."),
React.createElement("li", null, "Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links."),
React.createElement("li", null, "Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip."),
React.createElement("li", null, "Use text that suggests clicking, such as a command starting with an imperative verb like \"Show\", \"Print\", \"Copy\", or \"Delete\"."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Link/Link.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return LinkPage;
}(React.Component));
exports.LinkPage = LinkPage;
//# sourceMappingURL=LinkPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 16 16 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Link")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| List.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| List.js | 3.72% | (12 / 323) | 3.35% | (7 / 209) | 2.5% | (1 / 40) | 3.79% | (12 / 317) | |
| ListPage.js | 23.53% | (8 / 34) | 26.67% | (4 / 15) | 12.5% | (1 / 8) | 25.81% | (8 / 31) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=List.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 | 6 6 6 1 6 6 6 6 1 1 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var RESIZE_DELAY = 16;
var MIN_SCROLL_UPDATE_DELAY = 100;
var MAX_SCROLL_UPDATE_DELAY = 500;
var IDLE_DEBOUNCE_DELAY = 200;
var DEFAULT_ITEMS_PER_PAGE = 10;
var DEFAULT_PAGE_HEIGHT = 30;
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
var EMPTY_RECT = {
top: -1,
bottom: -1,
left: -1,
right: -1,
width: 0,
height: 0
};
// Naming expensive measures so that they're named in profiles.
var _measurePageRect = function (element) { return element.getBoundingClientRect(); };
var _measureSurfaceRect = _measurePageRect;
var _measureScrollRect = _measurePageRect;
/**
* The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if
* provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by
* the caller, or by cached measurements if available, or by a running average, or a default fallback.
*
* The algorithm for rendering pages works like this:
*
* 1. Predict visible pages based on "current measure data" (page heights, surface position, visible window)
* 2. If changes are necessary, apply changes (add/remove pages)
* 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect
* 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously
*
* Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that
* we can avoid re-measuring during operations that should not alter heights, like scrolling.
*
* However, certain operations can make measure data stale. For example, resizing the list, or passing in new props,
* or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion
* number, which we associate with cached measurements and use to determine if a remeasure should occur.
*/
var List = (function (_super) {
__extends(List, _super);
function List(props) {
var _this = _super.call(this, props) || this;
_this.state = {
pages: []
};
_this._estimatedPageHeight = 0;
_this._totalEstimates = 0;
_this._requiredWindowsAhead = 0;
_this._requiredWindowsBehind = 0;
// Track the measure version for everything.
_this._measureVersion = 0;
// Ensure that scrolls are lazy updated.
_this._onAsyncScroll = _this._async.debounce(_this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {
leading: false,
maxWait: MAX_SCROLL_UPDATE_DELAY
});
_this._onAsyncIdle = _this._async.debounce(_this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {
leading: false
});
_this._onAsyncResize = _this._async.debounce(_this._onAsyncResize, RESIZE_DELAY, {
leading: false
});
_this._cachedPageHeights = {};
_this._estimatedPageHeight = 0;
_this._focusedIndex = -1;
_this._scrollingToIndex = -1;
return _this;
}
/**
* Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback
* to measure the height of an individual item is specified, will only scroll to bring the specific item into view.
*
* Note: with items of variable height and no passed in `getPageHeight` method, the list might jump after scrolling
* when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.
*
* @param index Index of item to scroll to
* @param measureItem Optional callback to measure the height of an individual item
*/
List.prototype.scrollToIndex = function (index, measureItem) {
var startIndex = this.props.startIndex;
var renderCount = this._getRenderCount();
var endIndex = startIndex + renderCount;
var scrollTop = 0;
var itemsPerPage = 1;
for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {
itemsPerPage = this._getItemCountForPage(itemIndex, this._allowedRect);
var requestedIndexIsInPage = itemIndex <= index && (itemIndex + itemsPerPage) > index;
if (requestedIndexIsInPage) {
// We have found the page. If the user provided a way to measure an individual item, we will try to scroll in just
// the given item, otherwise we'll only bring the page into view
if (measureItem) {
// Adjust for actual item position within page
var itemPositionWithinPage = index - itemIndex;
for (var itemIndexInPage = 0; itemIndexInPage < itemPositionWithinPage; ++itemIndexInPage) {
scrollTop += measureItem(itemIndex + itemIndexInPage);
}
var scrollBottom = scrollTop + measureItem(index);
var scrollRect = _measureScrollRect(this._scrollElement);
var scrollWindow = {
top: this._scrollElement.scrollTop,
bottom: this._scrollElement.scrollTop + scrollRect.height
};
var itemIsFullyVisible = scrollTop >= scrollWindow.top && scrollBottom <= scrollWindow.bottom;
if (itemIsFullyVisible) {
// Item is already visible, do nothing.
return;
}
var itemIsPartiallyAbove = scrollTop < scrollWindow.top;
var itemIsPartiallyBelow = scrollBottom > scrollWindow.bottom;
if (itemIsPartiallyAbove) {
// We will just scroll to 'scrollTop'
// ______
// |Item | - scrollTop
// | ____|_
// |_|____| | - scrollWindow.top
// | |
// |______|
}
else if (itemIsPartiallyBelow) {
// Adjust scrollTop position to just bring in the element
// ______ - scrollTop
// | |
// | ____|_ - scrollWindow.bottom
// |_|____| |
// | Item |
// |______| - scrollBottom
scrollTop = this._scrollElement.scrollTop + (scrollBottom - scrollWindow.bottom);
}
}
this._scrollElement.scrollTop = scrollTop;
break;
}
scrollTop += this._getPageHeight(itemIndex, itemsPerPage, this._surfaceRect);
}
};
List.prototype.componentDidMount = function () {
this._updatePages();
this._measureVersion++;
this._scrollElement = Utilities_1.findScrollableParent(this.refs.root);
this._events.on(window, 'resize', this._onAsyncResize);
this._events.on(this.refs.root, 'focus', this._onFocus, true);
if (this._scrollElement) {
this._events.on(this._scrollElement, 'scroll', this._onScroll);
this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);
}
};
List.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.items !== this.props.items ||
newProps.renderCount !== this.props.renderCount ||
newProps.startIndex !== this.props.startIndex) {
this._measureVersion++;
this._updatePages(newProps);
}
};
List.prototype.shouldComponentUpdate = function (newProps, newState) {
var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
var oldPages = this.state.pages;
var newPages = newState.pages, measureVersion = newState.measureVersion;
var shouldComponentUpdate = false;
if (this._measureVersion === measureVersion &&
newProps.renderedWindowsAhead === renderedWindowsAhead,
newProps.renderedWindowsBehind === renderedWindowsBehind,
newProps.items === this.props.items &&
oldPages.length === newPages.length) {
for (var i = 0; i < oldPages.length; i++) {
var oldPage = oldPages[i];
var newPage = newPages[i];
if ((oldPage.key !== newPage.key ||
oldPage.itemCount !== newPage.itemCount)) {
shouldComponentUpdate = true;
break;
}
}
}
else {
shouldComponentUpdate = true;
}
return shouldComponentUpdate;
};
List.prototype.forceUpdate = function () {
// Ensure that when the list is force updated we update the pages first before render.
this._updateRenderRects(this.props, true);
this._updatePages();
this._measureVersion++;
_super.prototype.forceUpdate.call(this);
};
List.prototype.render = function () {
var _a = this.props, className = _a.className, role = _a.role;
var pages = this.state.pages;
var pageElements = [];
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
// assign list if no role
role = (role === undefined) ? 'list' : role;
for (var i = 0; i < pages.length; i++) {
pageElements.push(this._renderPage(pages[i]));
}
return (React.createElement("div", __assign({ ref: 'root' }, divProps, { role: role, className: Utilities_1.css('ms-List', className) }),
React.createElement("div", { ref: 'surface', className: 'ms-List-surface' }, pageElements)));
};
List.prototype._renderPage = function (page) {
var _a = this.props, onRenderCell = _a.onRenderCell, role = _a.role;
var cells = [];
var pageStyle = this._getPageStyle(page);
// only assign list item role if no role is assigned
role = (role === undefined) ? 'listitem' : null;
for (var i = 0; page.items && i < page.items.length; i++) {
var item = page.items[i];
var index = page.startIndex + i;
var itemKey = this.props.getKey
? this.props.getKey(item, index)
: item && item.key;
if (itemKey === null || itemKey === undefined) {
itemKey = index;
}
cells.push(React.createElement("div", { role: role, className: 'ms-List-cell', key: itemKey, "data-list-index": i + page.startIndex, "data-automationid": 'ListCell' }, onRenderCell(item, page.startIndex + i)));
}
return (React.createElement("div", { className: 'ms-List-page', key: page.key, ref: page.key, style: pageStyle }, cells));
};
/** Generate the style object for the page. */
List.prototype._getPageStyle = function (page) {
var style;
var getPageStyle = this.props.getPageStyle;
if (getPageStyle) {
style = getPageStyle(page);
}
if (!page.items) {
style = style || {};
style.height = page.height;
}
return style;
};
/** Track the last item index focused so that we ensure we keep it rendered. */
List.prototype._onFocus = function (ev) {
var target = ev.target;
while (target !== this.refs.surface) {
var indexString = target.getAttribute('data-list-index');
if (indexString) {
this._focusedIndex = Number(indexString);
break;
}
target = Utilities_1.getParent(target);
}
};
/**
* Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed,
* we will call onAsyncIdle which will reset it back to it's correct value.
*/
List.prototype._onScroll = function () {
this._requiredWindowsAhead = 0;
this._requiredWindowsBehind = 0;
};
/**
* Debounced method to asynchronously update the visible region on a scroll event.
*/
List.prototype._onAsyncScroll = function () {
this._updateRenderRects();
// Only update pages when the visible rect falls outside of the materialized rect.
if (!this._materializedRect || !_isContainedWithin(this._requiredRect, this._materializedRect)) {
this._updatePages();
}
else {
// console.log('requiredRect contained in materialized', this._requiredRect, this._materializedRect);
}
};
/**
* This is an async debounced method that will try and increment the windows we render. If we can increment
* either, we increase the amount we render and re-evaluate.
*/
List.prototype._onAsyncIdle = function () {
var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
var _b = this, requiredWindowsAhead = _b._requiredWindowsAhead, requiredWindowsBehind = _b._requiredWindowsBehind;
var windowsAhead = Math.min(renderedWindowsAhead, requiredWindowsAhead + 1);
var windowsBehind = Math.min(renderedWindowsBehind, requiredWindowsBehind + 1);
if (windowsAhead !== requiredWindowsAhead || windowsBehind !== requiredWindowsBehind) {
// console.log('idling', windowsBehind, windowsAhead);
this._requiredWindowsAhead = windowsAhead;
this._requiredWindowsBehind = windowsBehind;
this._updateRenderRects();
this._updatePages();
}
if (renderedWindowsAhead > windowsAhead || renderedWindowsBehind > windowsBehind) {
// Async increment on next tick.
this._onAsyncIdle();
}
};
List.prototype._onAsyncResize = function () {
this.forceUpdate();
};
List.prototype._updatePages = function (props) {
var _this = this;
var _a = (props || this.props), items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;
renderCount = this._getRenderCount(props);
// console.log('updating pages');
if (!this._requiredRect) {
this._updateRenderRects(props);
}
var newListState = this._buildPages(items, startIndex, renderCount);
var oldListPages = this.state.pages;
this.setState(newListState, function () {
// If measured version is invalid since we've updated the DOM
var heightsChanged = _this._updatePageMeasurements(oldListPages, newListState.pages);
// On first render, we should re-measure so that we don't get a visual glitch.
if (heightsChanged) {
_this._materializedRect = null;
if (!_this._hasCompletedFirstRender) {
_this._hasCompletedFirstRender = true;
_this._updatePages();
}
else {
_this._onAsyncScroll();
}
}
else {
// Enqueue an idle bump.
_this._onAsyncIdle();
}
});
};
List.prototype._updatePageMeasurements = function (oldPages, newPages) {
var renderedIndexes = {};
var heightChanged = false;
var renderCount = this._getRenderCount();
for (var i = 0; i < oldPages.length; i++) {
var page = oldPages[i];
if (page.items) {
renderedIndexes[page.startIndex] = page;
}
}
for (var i = 0; i < newPages.length; i++) {
var page = newPages[i];
if (page.items) {
// Only evaluate page height if the page contains less items than total.
if (page.items.length < renderCount) {
heightChanged = this._measurePage(page) || heightChanged;
}
if (!renderedIndexes[page.startIndex]) {
this._onPageAdded(page);
}
else {
delete renderedIndexes[page.startIndex];
}
}
}
for (var index in renderedIndexes) {
if (renderedIndexes.hasOwnProperty(index)) {
this._onPageRemoved(renderedIndexes[index]);
}
}
return heightChanged;
};
/**
* Given a page, measure its dimensions, update cache.
* @returns True if the height has changed.
*/
List.prototype._measurePage = function (page) {
var hasChangedHeight = false;
var pageElement = this.refs[page.key];
var cachedHeight = this._cachedPageHeights[page.startIndex];
// console.log(' * measure attempt', page.startIndex, cachedHeight);
if (pageElement && (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) {
var newClientRect = _measurePageRect(pageElement);
hasChangedHeight = page.height !== newClientRect.height;
// console.warn(' *** expensive page measure', page.startIndex, page.height, newClientRect.height);
page.height = newClientRect.height;
this._cachedPageHeights[page.startIndex] = {
height: newClientRect.height,
measureVersion: this._measureVersion
};
this._estimatedPageHeight = Math.round(((this._estimatedPageHeight * this._totalEstimates) + newClientRect.height) /
(this._totalEstimates + 1));
this._totalEstimates++;
}
return hasChangedHeight;
};
/** Called when a page has been added to the DOM. */
List.prototype._onPageAdded = function (page) {
var onPageAdded = this.props.onPageAdded;
// console.log('page added', page.startIndex, this.state.pages.map(page=>page.key).join(', '));
if (onPageAdded) {
onPageAdded(page);
}
};
/** Called when a page has been removed from the DOM. */
List.prototype._onPageRemoved = function (page) {
var onPageRemoved = this.props.onPageRemoved;
// console.log(' --- page removed', page.startIndex, this.state.pages.map(page=>page.key).join(', '));
if (onPageRemoved) {
onPageRemoved(page);
}
};
/** Build up the pages that should be rendered. */
List.prototype._buildPages = function (items, startIndex, renderCount) {
var materializedRect = Utilities_1.assign({}, EMPTY_RECT);
var itemsPerPage = 1;
var pages = [];
var pageTop = 0;
var currentSpacer = null;
var focusedIndex = this._focusedIndex;
var endIndex = startIndex + renderCount;
// First render is very important to track; when we render cells, we have no idea of estimated page height.
// So we should default to rendering only the first page so that we can get information.
// However if the user provides a measure function, let's just assume they know the right heights.
var isFirstRender = this._estimatedPageHeight === 0 && !this.props.getPageHeight;
var _loop_1 = function (itemIndex) {
itemsPerPage = this_1._getItemCountForPage(itemIndex, this_1._allowedRect);
var pageHeight = this_1._getPageHeight(itemIndex, itemsPerPage, this_1._surfaceRect);
var pageBottom = pageTop + pageHeight - 1;
var isPageRendered = Utilities_1.findIndex(this_1.state.pages, function (page) { return page.items && page.startIndex === itemIndex; }) > -1;
var isPageInAllowedRange = pageBottom >= this_1._allowedRect.top && pageTop <= this_1._allowedRect.bottom;
var isPageInRequiredRange = pageBottom >= this_1._requiredRect.top && pageTop <= this_1._requiredRect.bottom;
var isPageVisible = !isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered));
var isPageFocused = focusedIndex >= itemIndex && focusedIndex < (itemIndex + itemsPerPage);
var isFirstPage = itemIndex === startIndex;
// console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' + isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange);
// Only render whats visible, focused, or first page.
if (isPageVisible || isPageFocused || isFirstPage) {
if (currentSpacer) {
pages.push(currentSpacer);
currentSpacer = null;
}
var itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);
var newPage = this_1._createPage(null, items.slice(itemIndex, itemIndex + itemsInPage), itemIndex);
newPage.top = pageTop;
newPage.height = pageHeight;
pages.push(newPage);
if (isPageInRequiredRange) {
_mergeRect(materializedRect, {
top: pageTop,
bottom: pageBottom,
height: pageHeight,
left: this_1._allowedRect.left,
right: this_1._allowedRect.right,
width: this_1._allowedRect.width
});
}
}
else {
if (!currentSpacer) {
currentSpacer = this_1._createPage('spacer-' + itemIndex, null, itemIndex, 0);
}
currentSpacer.height = (currentSpacer.height || 0) + (pageBottom - pageTop) + 1;
currentSpacer.itemCount += itemsPerPage;
}
pageTop += (pageBottom - pageTop + 1);
if (isFirstRender) {
return "break";
}
};
var this_1 = this;
for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {
var state_1 = _loop_1(itemIndex);
if (state_1 === "break")
break;
}
if (currentSpacer) {
currentSpacer.key = 'spacer-end';
pages.push(currentSpacer);
}
this._materializedRect = materializedRect;
// console.log('materialized: ', materializedRect);
return {
pages: pages,
measureVersion: this._measureVersion
};
};
/**
* Get the pixel height of a give page. Will use the props getPageHeight first, and if not provided, fallback to
* cached height, or estimated page height, or default page height.
*/
List.prototype._getPageHeight = function (itemIndex, itemsPerPage, visibleRect) {
if (this.props.getPageHeight) {
return this.props.getPageHeight(itemIndex, visibleRect);
}
else {
var cachedHeight = (this._cachedPageHeights[itemIndex]);
return cachedHeight ? cachedHeight.height : (this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT);
}
};
List.prototype._getItemCountForPage = function (itemIndex, visibileRect) {
var itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE;
return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE;
};
List.prototype._createPage = function (pageKey, items, startIndex, count, style) {
pageKey = pageKey || ('page-' + startIndex);
// Fill undefined cells because array.map will ignore undefined cells.
if (items) {
for (var i = 0; i < items.length; i++) {
items[i] = items[i] || null;
}
}
return {
key: pageKey,
startIndex: startIndex === undefined ? -1 : startIndex,
itemCount: (count === undefined) ? (items ? items.length : 0) : count,
items: items,
style: style || {},
top: 0,
height: 0
};
};
List.prototype._getRenderCount = function (props) {
var _a = props || this.props, items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;
return (renderCount === undefined ? (items ? items.length - startIndex : 0) : renderCount);
};
/** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */
List.prototype._updateRenderRects = function (props, forceUpdate) {
var _a = (props || this.props), renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
var pages = this.state.pages;
var renderCount = this._getRenderCount(props);
var surfaceRect = this._surfaceRect;
// WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window.
if (forceUpdate ||
!pages ||
!this._surfaceRect ||
(pages.length > 0 && pages[0].items && pages[0].items.length < renderCount)) {
surfaceRect = this._surfaceRect = _measureSurfaceRect(this.refs.surface);
}
// If the surface is above the container top or below the container bottom, or if this is not the first
// render return empty rect.
// The first time the list gets rendered we need to calculate the rectangle. The width of the list is
// used to calculate the width of the list items.
var visibleTop = Math.max(0, -surfaceRect.top);
var visibleRect = {
top: visibleTop,
left: surfaceRect.left,
bottom: visibleTop + window.innerHeight,
right: surfaceRect.right,
width: surfaceRect.width,
height: window.innerHeight
};
// The required/allowed rects are adjusted versions of the visible rect.
this._requiredRect = _expandRect(visibleRect, this._requiredWindowsBehind, this._requiredWindowsAhead);
this._allowedRect = _expandRect(visibleRect, renderedWindowsBehind, renderedWindowsAhead);
};
return List;
}(Utilities_1.BaseComponent));
List.defaultProps = {
startIndex: 0,
onRenderCell: function (item, index, containsFocus) { return (React.createElement("div", null, (item && item.name) || '')); },
renderedWindowsAhead: DEFAULT_RENDERED_WINDOWS_AHEAD,
renderedWindowsBehind: DEFAULT_RENDERED_WINDOWS_BEHIND
};
exports.List = List;
function _expandRect(rect, pagesBefore, pagesAfter) {
var top = rect.top - (pagesBefore * rect.height);
var height = rect.height + ((pagesBefore + pagesAfter) * rect.height);
return {
top: top,
bottom: top + height,
height: height,
left: rect.left,
right: rect.right,
width: rect.width
};
}
function _isContainedWithin(innerRect, outerRect) {
return (innerRect.top >= outerRect.top &&
innerRect.left >= outerRect.left &&
innerRect.bottom <= outerRect.bottom &&
innerRect.right <= outerRect.right);
}
function _mergeRect(targetRect, newRect) {
targetRect.top = (newRect.top < targetRect.top || targetRect.top === -1) ? newRect.top : targetRect.top;
targetRect.left = (newRect.left < targetRect.left || targetRect.left === -1) ? newRect.left : targetRect.left;
targetRect.bottom = (newRect.bottom > targetRect.bottom || targetRect.bottom === -1) ? newRect.bottom : targetRect.bottom;
targetRect.right = (newRect.right > targetRect.right || targetRect.right === -1) ? newRect.right : targetRect.right;
targetRect.width = targetRect.right - targetRect.left + 1;
targetRect.height = targetRect.bottom - targetRect.top + 1;
return targetRect;
}
//# sourceMappingURL=List.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var List_Basic_Example_1 = require("./examples/List.Basic.Example");
var List_Mail_Example_1 = require("./examples/List.Mail.Example");
var List_Grid_Example_1 = require("./examples/List.Grid.Example");
var List_Scrolling_Example_1 = require("./examples/List.Scrolling.Example");
var example_app_base_2 = require("@uifabric/example-app-base");
var ListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx');
var ListMailExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Mail.Example.tsx');
var ListGridExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx');
var ListScrollingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx');
var _cachedItems;
var ListPage = (function (_super) {
__extends(ListPage, _super);
function ListPage() {
var _this = _super.call(this) || this;
_cachedItems = _cachedItems || example_app_base_2.createListItems(5000);
return _this;
}
ListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'List', componentName: 'ListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'List of 5000 grid items', isOptIn: true, code: ListGridExampleCode },
React.createElement(List_Grid_Example_1.ListGridExample, { items: _cachedItems })),
React.createElement(example_app_base_1.ExampleCard, { title: 'List of 5000 variable height items', isOptIn: true, code: ListBasicExampleCode },
React.createElement(List_Basic_Example_1.ListBasicExample, { items: _cachedItems })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Fixed list of 5000 email tiles', isOptIn: true, code: ListMailExampleCode },
React.createElement(List_Mail_Example_1.ListMailExample, { items: _cachedItems })),
React.createElement(example_app_base_1.ExampleCard, { title: 'Scrolling items into view', isOptIn: true, code: ListScrollingExampleCode },
React.createElement(List_Scrolling_Example_1.ListScrollingExample, { items: _cachedItems }))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/List/List.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null,
React.createElement("span", null, "List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately.")),
React.createElement("p", null,
React.createElement("b", null, "Performance is important, and DOM content is expensive. Therefore limit what you render."),
" Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive."),
React.createElement("p", null, "Lists break down the set of items passed in into pages. Only pages within a \"materialized window\" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/List/List.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ListPage;
}(React.Component));
exports.ListPage = ListPage;
//# sourceMappingURL=ListPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./List")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| MarqueeSelection.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| MarqueeSelection.js | 6.8% | (10 / 147) | 8.4% | (10 / 119) | 5% | (1 / 20) | 7.14% | (10 / 140) | |
| MarqueeSelection.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| MarqueeSelectionPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=MarqueeSelection.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 | 4 4 4 1 4 4 4 4 4 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./MarqueeSelection.scss");
// We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start
// the drag even if they just click an item without moving.
var MIN_DRAG_DISTANCE = 5;
/**
* MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.
* Elements which have data-selectable-index attributes are queried and measured once to determine if they
* fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization
* so if the items change sizes while dragging, that could cause incorrect results.
*/
var MarqueeSelection = (function (_super) {
__extends(MarqueeSelection, _super);
function MarqueeSelection(props) {
var _this = _super.call(this, props) || this;
_this.state = {
dragRect: undefined
};
return _this;
}
MarqueeSelection.prototype.componentDidMount = function () {
this._scrollableParent = Utilities_1.findScrollableParent(this.refs.root);
this._scrollableSurface = this._scrollableParent === window ? document.body : this._scrollableParent;
// When scroll events come from window, we need to read scrollTop values from the body.
this._events.on(this.props.isDraggingConstrainedToRoot ? this.refs.root : this._scrollableSurface, 'mousedown', this._onMouseDown);
};
MarqueeSelection.prototype.componentWillUnmount = function () {
if (this._autoScroll) {
this._autoScroll.dispose();
}
};
MarqueeSelection.prototype.render = function () {
var _a = this.props, rootProps = _a.rootProps, children = _a.children;
var dragRect = this.state.dragRect;
return (React.createElement("div", __assign({}, rootProps, { className: Utilities_1.css('ms-MarqueeSelection', styles.root, rootProps.className), ref: 'root' }),
children,
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-dragMask', styles.dragMask) })),
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-box', styles.box), style: dragRect },
React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-boxFill', styles.boxFill) })))));
};
/** Determine if the mouse event occured on a scrollbar of the target element. */
MarqueeSelection.prototype._isMouseEventOnScrollbar = function (ev) {
var targetElement = ev.target;
var targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
if (targetScrollbarWidth) {
var targetRect = targetElement.getBoundingClientRect();
// Check vertical scroll
if (Utilities_1.getRTL()) {
if (ev.clientX < (targetRect.left + targetScrollbarWidth)) {
return true;
}
}
else {
if (ev.clientX > (targetRect.left + targetElement.clientWidth)) {
return true;
}
}
// Check horizontal scroll
if (ev.clientY > (targetRect.top + targetElement.clientHeight)) {
return true;
}
}
return false;
};
MarqueeSelection.prototype._onMouseDown = function (ev) {
var _a = this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection;
// Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
if (this._isMouseEventOnScrollbar(ev)) {
return;
}
if (isEnabled && !this._isDragStartInSelection(ev) && (!onShouldStartSelection || onShouldStartSelection(ev))) {
if (this._scrollableSurface && ev.button === 0) {
this._selectedIndicies = {};
this._events.on(window, 'mousemove', this._onMouseMove);
this._events.on(this._scrollableParent, 'scroll', this._onMouseMove);
this._events.on(window, 'click', this._onMouseUp, true);
this._autoScroll = new Utilities_1.AutoScroll(this.refs.root);
this._scrollTop = this._scrollableSurface.scrollTop;
this._rootRect = this.refs.root.getBoundingClientRect();
}
}
};
MarqueeSelection.prototype._getRootRect = function () {
return {
left: this._rootRect.left,
top: this._rootRect.top + (this._scrollTop - this._scrollableSurface.scrollTop),
width: this._rootRect.width,
height: this._rootRect.height
};
};
MarqueeSelection.prototype._onMouseMove = function (ev) {
if (ev.clientX !== undefined) {
this._lastMouseEvent = ev;
}
var rootRect = this._getRootRect();
var currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top };
if (!this._dragOrigin) {
this._dragOrigin = currentPoint;
}
if (ev.buttons !== undefined && ev.buttons === 0) {
this._onMouseUp(ev);
}
else {
if (this.state.dragRect || Utilities_1.getDistanceBetweenPoints(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) {
// We need to constrain the current point to the rootRect boundaries.
var constrainedPoint = this.props.isDraggingConstrainedToRoot ? {
x: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)),
y: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top))
} : {
x: this._lastMouseEvent.clientX - rootRect.left,
y: this._lastMouseEvent.clientY - rootRect.top
};
var dragRect = {
left: Math.min(this._dragOrigin.x, constrainedPoint.x),
top: Math.min(this._dragOrigin.y, constrainedPoint.y),
width: Math.abs(constrainedPoint.x - this._dragOrigin.x),
height: Math.abs(constrainedPoint.y - this._dragOrigin.y)
};
this.setState({ dragRect: dragRect });
this._evaluateSelection(dragRect);
}
}
ev.stopPropagation();
ev.preventDefault();
return false;
};
MarqueeSelection.prototype._onMouseUp = function (ev) {
this._events.off(window);
this._events.off(this._scrollableParent, 'scroll');
this._autoScroll.dispose();
this._autoScroll = this._dragOrigin = this._lastMouseEvent = this._selectedIndicies = this._itemRectCache = undefined;
if (this.state.dragRect) {
this.setState({
dragRect: undefined
});
ev.preventDefault();
ev.stopPropagation();
}
};
MarqueeSelection.prototype._isPointInRectangle = function (rectangle, point) {
return rectangle.top < point.y &&
rectangle.bottom > point.y &&
rectangle.left < point.x &&
rectangle.right > point.x;
};
/**
* We do not want to start the marquee if we're trying to marquee
* from within an existing marquee selection.
*/
MarqueeSelection.prototype._isDragStartInSelection = function (ev) {
var selection = this.props.selection;
if (selection && selection.getSelectedCount() === 0) {
return false;
}
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
for (var i = 0; i < allElements.length; i++) {
var element = allElements[i];
var index = Number(element.getAttribute('data-selection-index'));
if (selection.isIndexSelected(index)) {
var itemRect = element.getBoundingClientRect();
if (this._isPointInRectangle(itemRect, { x: ev.x, y: ev.y })) {
return true;
}
}
}
return false;
};
MarqueeSelection.prototype._evaluateSelection = function (dragRect) {
// Break early if we don't need to evaluate.
if (!dragRect) {
return;
}
var selection = this.props.selection;
var rootRect = this._getRootRect();
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
if (!this._itemRectCache) {
this._itemRectCache = {};
}
// Stop change events, clear selection to re-populate.
selection.setChangeEvents(false);
selection.setAllSelected(false);
for (var i = 0; i < allElements.length; i++) {
var element = allElements[i];
var index = element.getAttribute('data-selection-index');
// Pull the memoized rectangle for the item, or the get the rect and memoize.
var itemRect = this._itemRectCache[index];
if (!itemRect) {
itemRect = element.getBoundingClientRect();
// Normalize the item rect to the dragRect coordinates.
itemRect = {
left: itemRect.left - rootRect.left,
top: itemRect.top - rootRect.top,
width: itemRect.width,
height: itemRect.height,
right: (itemRect.left - rootRect.left) + itemRect.width,
bottom: (itemRect.top - rootRect.top) + itemRect.height
};
if (itemRect.width > 0 && itemRect.height > 0) {
this._itemRectCache[index] = itemRect;
}
}
if (itemRect.top < (dragRect.top + dragRect.height) &&
itemRect.bottom > dragRect.top &&
itemRect.left < (dragRect.left + dragRect.width) &&
itemRect.right > dragRect.left) {
this._selectedIndicies[index] = true;
}
else {
delete this._selectedIndicies[index];
}
}
for (var index in this._selectedIndicies) {
if (this._selectedIndicies.hasOwnProperty(index)) {
selection.setIndexSelected(Number(index), true, false);
}
}
selection.setChangeEvents(true);
};
return MarqueeSelection;
}(Utilities_1.BaseComponent));
MarqueeSelection.defaultProps = {
rootTagName: 'div',
rootProps: {},
isEnabled: true
};
__decorate([
Utilities_1.autobind
], MarqueeSelection.prototype, "_onMouseDown", null);
exports.MarqueeSelection = MarqueeSelection;
//# sourceMappingURL=MarqueeSelection.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_be5479a3',
dragMask: 'dragMask_be5479a3',
box: 'box_be5479a3',
boxFill: 'boxFill_be5479a3',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_be5479a3{position:relative;cursor:default}.dragMask_be5479a3{position:absolute;background:rgba(255,0,0,0);left:0;top:0;right:0;bottom:0}.box_be5479a3{position:absolute;box-sizing:border-box;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";pointer-events:none}.boxFill_be5479a3{position:absolute;box-sizing:border-box;background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";opacity:.1;left:0;top:0;right:0;bottom:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=MarqueeSelection.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var MarqueeSelection_Basic_Example_1 = require("./examples/MarqueeSelection.Basic.Example");
var MarqueeSelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx');
var MarqueeSelectionPage = (function (_super) {
__extends(MarqueeSelectionPage, _super);
function MarqueeSelectionPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
MarqueeSelectionPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'MarqueeSelection', componentName: 'MarqueeSelectionExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Basic Selection Example', code: MarqueeSelectionBasicExampleCode },
React.createElement(MarqueeSelection_Basic_Example_1.MarqueeSelectionBasicExample, null)), overview: React.createElement("div", null,
React.createElement("p", null, "The MarqueeSelection component provides a service which allows the user to drag a rectangle to be drawn around items to select them. This works in conjunction with a selection object, which can be used to generically store selection state, separate from a component that consumes the state."),
React.createElement("p", null, "MarqueeSelection also works in conjunction with the AutoScroll utility to automatically scroll the container when we drag a rectangle within the vicinity of the edges."),
React.createElement("p", null,
"When a selection rectangle is dragged, we look for elements with the ",
React.createElement("b", null, "data-selection-index"),
" attribute populated. We get these elements' boundingClientRects and compare them with the root's rect to determine selection state. We update the selection state appropriately."),
React.createElement("p", null, "In virtualization cases where items that were once selected are dematerialized, we will keep the item in its previous state until we know definitively if it's on/off. (In other words, this works with List.)")), isHeaderVisible: this.props.isHeaderVisible }));
};
return MarqueeSelectionPage;
}(React.Component));
exports.MarqueeSelectionPage = MarqueeSelectionPage;
//# sourceMappingURL=MarqueeSelectionPage.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| MessageBar.Props.js | 100% | (10 / 10) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (10 / 10) | |
| MessageBar.js | 14.29% | (8 / 56) | 13.33% | (4 / 30) | 5.88% | (1 / 17) | 15.09% | (8 / 53) | |
| MessageBar.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| MessageBarPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MessageBarType;
(function (MessageBarType) {
/** Info styled MessageBar */
MessageBarType[MessageBarType["info"] = 0] = "info";
/** Error styled MessageBar */
MessageBarType[MessageBarType["error"] = 1] = "error";
/** Blocked styled MessageBar */
MessageBarType[MessageBarType["blocked"] = 2] = "blocked";
/** SevereWarning styled MessageBar */
MessageBarType[MessageBarType["severeWarning"] = 3] = "severeWarning";
/** Success styled MessageBar */
MessageBarType[MessageBarType["success"] = 4] = "success";
/** Warning styled MessageBar */
MessageBarType[MessageBarType["warning"] = 5] = "warning";
/**
* Deprecated at v0.48.0, to be removed at >= v1.0.0. Use 'blocked' instead.
* @deprecated
*/
MessageBarType[MessageBarType["remove"] = 90000] = "remove";
})(MessageBarType = exports.MessageBarType || (exports.MessageBarType = {}));
//# sourceMappingURL=MessageBar.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 6 6 6 1 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var MessageBar_Props_1 = require("./MessageBar.Props");
var styles = require("./MessageBar.scss");
var MessageBar = (function (_super) {
__extends(MessageBar, _super);
function MessageBar(props) {
var _this = _super.call(this, props) || this;
_this.ICON_MAP = (_a = {},
_a[MessageBar_Props_1.MessageBarType.info] = 'Info',
_a[MessageBar_Props_1.MessageBarType.warning] = 'Info',
_a[MessageBar_Props_1.MessageBarType.error] = 'ErrorBadge',
_a[MessageBar_Props_1.MessageBarType.blocked] = 'Blocked',
_a[MessageBar_Props_1.MessageBarType.remove] = 'Blocked',
_a[MessageBar_Props_1.MessageBarType.severeWarning] = 'Warning',
_a[MessageBar_Props_1.MessageBarType.success] = 'Completed',
_a);
_this.state = {
labelId: Utilities_1.getId('MessageBar'),
showContent: false
};
return _this;
var _a;
}
MessageBar.prototype.render = function () {
var isMultiline = this.props.isMultiline;
return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
};
MessageBar.prototype._getActionsDiv = function () {
if (this.props.actions) {
return React.createElement("div", { className: this.props.isMultiline ?
('ms-MessageBar-actions ' + styles.actions) :
('ms-MessageBar-actionsOneline ' + styles.actionsOneline) }, this.props.actions);
}
return null;
};
MessageBar.prototype._getClassName = function () {
return Utilities_1.css(this.props.className, 'ms-MessageBar', styles.root, (_a = {},
_a['ms-MessageBar ' + styles.root] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.info,
_a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.error,
_a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) ||
(this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove),
_a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning,
_a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.success,
_a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning,
_a));
var _a;
};
MessageBar.prototype._getDismissDiv = function () {
if (this.props.onDismiss != null) {
return (React.createElement(Button_1.IconButton, { disabled: false, className: Utilities_1.css('ms-MessageBar-dismissal', styles.dismissal), onClick: this.props.onDismiss, iconProps: { iconName: 'Cancel' }, ariaLabel: this.props.dismissButtonAriaLabel }));
}
return null;
};
MessageBar.prototype._getIconSpan = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-icon', styles.icon) },
React.createElement("i", { className: "ms-Icon ms-Icon--" + this.ICON_MAP[this.props.messageBarType] })));
};
MessageBar.prototype._getInnerTextClassName = function () {
return this.props.onDismiss || this.props.actions ?
'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText;
};
MessageBar.prototype._renderMultiLine = function () {
return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-multiline ' + styles.multiline, role: 'status', "aria-live": this._getAnnouncementPriority() },
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) },
this._getIconSpan(),
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) },
this._renderInnerText(),
this._getActionsDiv(),
this._getDismissDiv()))));
};
MessageBar.prototype._renderSingleLine = function () {
return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-singleline ' + styles.singleline },
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) },
this._getIconSpan(),
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) }, this._renderInnerText()),
this._getActionsDiv(),
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissalOneline', styles.dismissalOneline) }, this._getDismissDiv()))));
};
MessageBar.prototype._renderInnerText = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', styles.text), id: this.state.labelId },
React.createElement("span", { className: this._getInnerTextClassName(), role: 'status', "aria-live": this._getAnnouncementPriority() },
React.createElement(Utilities_1.DelayedRender, null,
React.createElement("span", null, this.props.children)))));
};
MessageBar.prototype._getAnnouncementPriority = function () {
switch (this.props.messageBarType) {
case MessageBar_Props_1.MessageBarType.blocked:
case MessageBar_Props_1.MessageBarType.error:
case MessageBar_Props_1.MessageBarType.severeWarning:
return 'assertive';
}
return 'polite';
};
return MessageBar;
}(Utilities_1.BaseComponent));
MessageBar.defaultProps = {
messageBarType: MessageBar_Props_1.MessageBarType.info,
onDismiss: null,
isMultiline: true,
};
exports.MessageBar = MessageBar;
//# sourceMappingURL=MessageBar.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_79af0d36',
icon: 'icon_79af0d36',
text: 'text_79af0d36',
rootIsWarning: 'rootIsWarning_79af0d36',
rootIsSevereWarning: 'rootIsSevereWarning_79af0d36',
rootIsError: 'rootIsError_79af0d36',
rootIsBlocked: 'rootIsBlocked_79af0d36',
rootIsSuccess: 'rootIsSuccess_79af0d36',
content: 'content_79af0d36',
actionables: 'actionables_79af0d36',
dismissal: 'dismissal_79af0d36',
actions: 'actions_79af0d36',
actionsOneline: 'actionsOneline_79af0d36',
dismissalOneline: 'dismissalOneline_79af0d36',
innerTextPadding: 'innerTextPadding_79af0d36',
innerText: 'innerText_79af0d36',
multiline: 'multiline_79af0d36',
singleline: 'singleline_79af0d36',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_79af0d36{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;background-color:" }, { "theme": "infoBackground", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "infoText", "defaultValue": "#333333" }, { "rawString": ";width:100%;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.root_79af0d36 .icon_79af0d36{color:" }, { "theme": "info", "defaultValue": "#767676" }, { "rawString": "}html[dir=ltr] .root_79af0d36 .icon_79af0d36{padding-right:8px}html[dir=rtl] .root_79af0d36 .icon_79af0d36{padding-left:8px}.root_79af0d36 .ms-Link{font-size:12px;color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}html[dir=ltr] .root_79af0d36 .ms-Button{margin-left:6px}html[dir=rtl] .root_79af0d36 .ms-Button{margin-right:6px}.icon_79af0d36,.text_79af0d36{display:table-cell;vertical-align:top}.icon_79af0d36{font-size:16px;min-width:16px;min-height:16px;display:-webkit-box;display:-ms-flexbox;display:flex}.text_79af0d36{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex}.root_79af0d36.rootIsWarning_79af0d36{background-color:" }, { "theme": "warningBackground", "defaultValue": "#fff4ce" }, { "rawString": ";color:" }, { "theme": "warningText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsSevereWarning_79af0d36{background-color:" }, { "theme": "severeWarningBackground", "defaultValue": "#fed9cc" }, { "rawString": ";color:" }, { "theme": "severeWarningText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsSevereWarning_79af0d36 .icon_79af0d36{color:" }, { "theme": "severeWarning", "defaultValue": "#d83b01" }, { "rawString": "}.root_79af0d36.rootIsError_79af0d36{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsError_79af0d36 .icon_79af0d36{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_79af0d36.rootIsBlocked_79af0d36{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsBlocked_79af0d36 .icon_79af0d36{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_79af0d36.rootIsSuccess_79af0d36{background-color:" }, { "theme": "successBackground", "defaultValue": "#dff6dd" }, { "rawString": ";color:" }, { "theme": "successText", "defaultValue": "#333333" }, { "rawString": "}.root_79af0d36.rootIsSuccess_79af0d36 .icon_79af0d36{color:" }, { "theme": "green", "defaultValue": "#107c10" }, { "rawString": "}.content_79af0d36{padding:16px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;box-sizing:border-box}.content_79af0d36:before{position:absolute;content:' ';right:0;bottom:0;left:0;top:0;margin:0}@media screen and (-ms-high-contrast:active){.content_79af0d36:before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.content_79af0d36:before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.actionables_79af0d36{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-width:0}.actionables_79af0d36>.dismissal_79af0d36{right:0;top:0;position:absolute!important}.actionsOneline_79af0d36,.actions_79af0d36{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.actionsOneline_79af0d36{position:relative}.dismissal_79af0d36{min-width:0}.dismissal_79af0d36::-moz-focus-inner{border:0}.dismissal_79af0d36{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .dismissal_79af0d36:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .dismissalOneline_79af0d36 .dismissal_79af0d36{margin-right:-8px}html[dir=rtl] .dismissalOneline_79af0d36 .dismissal_79af0d36{margin-left:-8px}.root_79af0d36+.root_79af0d36{margin-top:6px}html[dir=ltr] .innerTextPadding_79af0d36{padding-right:24px}html[dir=rtl] .innerTextPadding_79af0d36{padding-left:24px}html[dir=ltr] .innerTextPadding_79af0d36 .innerText_79af0d36>span,html[dir=ltr] .innerTextPadding_79af0d36 span{padding-right:4px}html[dir=rtl] .innerTextPadding_79af0d36 .innerText_79af0d36>span,html[dir=rtl] .innerTextPadding_79af0d36 span{padding-left:4px}.multiline_79af0d36>.content_79af0d36>.actionables_79af0d36{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.singleline_79af0d36 .content_79af0d36 .icon_79af0d36{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.singleline_79af0d36 .content_79af0d36 .actionables_79af0d36>.text_79af0d36{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.singleline_79af0d36 .content_79af0d36 .actionables_79af0d36>.text_79af0d36 .innerTextPadding_79af0d36,.singleline_79af0d36 .content_79af0d36 .actionables_79af0d36>.text_79af0d36 .innerText_79af0d36{max-height:1.3em;line-height:1.3em;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.singleline_79af0d36 .content_79af0d36>.actionables_79af0d36{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.root_79af0d36 .ms-Icon--Cancel{font-size:14px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=MessageBar.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var MessageBar_Basic_Example_1 = require("./examples/MessageBar.Basic.Example");
var MessageBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx');
var MessageBarPage = (function (_super) {
__extends(MessageBarPage, _super);
function MessageBarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
MessageBarPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'MessageBar', componentName: 'MessageBarExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Various MessageBar types', code: MessageBarBasicExampleCode },
React.createElement(MessageBar_Basic_Example_1.MessageBarBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location."),
React.createElement("li", null, "Keep the text very brief. Be succinct and your users are more likely to read everything you say."),
React.createElement("li", null, "Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length."),
React.createElement("li", null, "Use the right variant for the type and urgency of the particular message (see variants)"))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user\u2019s main content too low on the view."),
React.createElement("li", null, "Don\u2019t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single \u201Dhero\u201D action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/MessageBar/MessageBar.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return MessageBarPage;
}(React.Component));
exports.MessageBarPage = MessageBarPage;
//# sourceMappingURL=MessageBarPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./MessageBar")); __export(require("./MessageBar.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Modal.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Modal.js | 13.85% | (9 / 65) | 11.48% | (7 / 61) | 8.33% | (1 / 12) | 15.25% | (9 / 59) | |
| Modal.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| ModalPage.js | 32% | (8 / 25) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 36.36% | (8 / 22) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Modal.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var index_1 = require("../FocusTrapZone/index");
var Overlay_1 = require("../../Overlay");
var Layer_1 = require("../../Layer");
var index_2 = require("../Popup/index");
var withResponsiveMode_1 = require("../../utilities/decorators/withResponsiveMode");
var styles = require("./Modal.scss");
var Modal = (function (_super) {
__extends(Modal, _super);
function Modal(props) {
var _this = _super.call(this, props) || this;
_this._onDialogRef = _this._onDialogRef.bind(_this);
_this.state = {
id: Utilities_1.getId('Modal'),
isOpen: props.isOpen,
isAnimatingOpen: props.isOpen,
isAnimatingClose: false
};
return _this;
}
Modal.prototype.componentWillReceiveProps = function (newProps) {
// Opening the dialog
if (newProps.isOpen && !this.state.isOpen) {
this.setState({
isOpen: true,
isAnimatingOpen: true,
isAnimatingClose: false
});
}
// Closing the dialog
if (!newProps.isOpen && this.state.isOpen) {
this.setState({
isAnimatingOpen: false,
isAnimatingClose: true
});
}
};
Modal.prototype.render = function () {
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId;
var _b = this.state, id = _b.id, isOpen = _b.isOpen, isAnimatingOpen = _b.isAnimatingOpen, isAnimatingClose = _b.isAnimatingClose;
// @TODO - the discussion on whether the Modal contain a property for rendering itself is still being discussed
if (!isOpen) {
return null;
}
var subTextContent;
var modalClassName = Utilities_1.css('ms-Dialog', styles.root, this.props.className, (_c = {},
_c['is-open ' + styles.isOpen] = isOpen,
_c['ms-u-fadeIn200'] = isAnimatingOpen,
_c['ms-u-fadeOut200'] = isAnimatingClose,
_c));
// @temp tuatology - Will adjust this to be a panel at certain breakpoints
if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
return (React.createElement(Layer_1.Layer, { onLayerDidMount: onLayerDidMount },
React.createElement(index_2.Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss },
React.createElement("div", { className: modalClassName, ref: this._onDialogRef },
React.createElement(Overlay_1.Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? null : onDismiss }),
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Dialog-main', styles.main, this.props.containerClassName), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children)))));
}
var _c;
};
Modal.prototype._onDialogRef = function (ref) {
if (ref) {
this._events.on(ref, 'animationend', this._onAnimationEnd);
}
else {
this._events.off();
}
};
// Watch for completed animations and set the state
Modal.prototype._onAnimationEnd = function (ev) {
// The dialog has just opened (faded in)
if (ev.animationName.indexOf('fadeIn') > -1) {
this.setState({
isOpen: true,
isAnimatingOpen: false
});
}
// The dialog has just closed (faded out)
if (ev.animationName.indexOf('fadeOut') > -1) {
this.setState({
isOpen: false,
isAnimatingClose: false
});
// Call the onDismiss callback
if (this.props.onDismissed) {
this.props.onDismissed();
}
}
};
return Modal;
}(Utilities_1.BaseComponent));
Modal.defaultProps = {
isOpen: false,
isDarkOverlay: true,
isBlocking: false,
className: '',
containerClassName: '',
};
Modal = __decorate([
withResponsiveMode_1.withResponsiveMode
], Modal);
exports.Modal = Modal;
//# sourceMappingURL=Modal.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_7a7daa2a',
isOpen: 'isOpen_7a7daa2a',
main: 'main_7a7daa2a',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_7a7daa2a{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;background-color:transparent;position:fixed;height:100%;width:100%;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none}.root_7a7daa2a .ms-Button.ms-Button--compound{display:block}html[dir=ltr] .root_7a7daa2a .ms-Button.ms-Button--compound{margin-left:0}html[dir=rtl] .root_7a7daa2a .ms-Button.ms-Button--compound{margin-right:0}@media screen and (-ms-high-contrast:active){.root_7a7daa2a .ms-Overlay{opacity:0}}.root_7a7daa2a.isOpen_7a7daa2a{display:-webkit-box;display:-ms-flexbox;display:flex}.main_7a7daa2a{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-sizing:border-box;position:relative;outline:3px solid transparent;max-height:100%;overflow-y:auto}html[dir=ltr] .main_7a7daa2a{text-align:left}html[dir=rtl] .main_7a7daa2a{text-align:right}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Modal.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var Modal_Basic_Example_1 = require("./examples/Modal.Basic.Example");
var ModalBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx');
var ModalPage = (function (_super) {
__extends(ModalPage, _super);
function ModalPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ModalPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Modal', componentName: 'ModalExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Modal', code: ModalBasicExampleCode },
React.createElement(Modal_Basic_Example_1.ModalBasicExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Modal/Modal.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content."),
React.createElement("p", null,
"For usage requiring a quick choice from the user, ",
React.createElement(Link_1.Link, { href: '#/examples/dialog' }, "Dialog"),
" may be a more appropriate control.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Modals for actionable interactions, such as needing the user to provide information or change settings."),
React.createElement("li", null, "When possible, try a non-blocking Modal before resorting to a blocking Modal."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return ModalPage;
}(React.Component));
exports.ModalPage = ModalPage;
//# sourceMappingURL=ModalPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Modal")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Nav.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Nav.js | 7.14% | (8 / 112) | 4.71% | (4 / 85) | 4% | (1 / 25) | 7.48% | (8 / 107) | |
| Nav.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| NavPage.js | 26.67% | (8 / 30) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 29.63% | (8 / 27) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Nav.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | 6 6 6 1 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var Button_1 = require("../../Button");
var styles = require("./Nav.scss");
// The number pixels per indentation level for Nav links.
var _indentationSize = 14;
// Tne number of pixels of left margin when there is expand/collaps button
var _indentWithExpandButton = 28;
// Tne number of pixels of left margin when there is expand/collaps button
var _indentNoExpandButton = 20;
// global var used in _isLinkSelectedKey
var _urlResolver;
var Nav = (function (_super) {
__extends(Nav, _super);
function Nav(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isGroupCollapsed: {},
isLinkExpandStateChanged: false,
selectedKey: props.initialSelectedKey || props.selectedKey,
};
_this._hasExpandButton = false;
return _this;
}
Nav.prototype.render = function () {
var _this = this;
var _a = this.props, groups = _a.groups, className = _a.className, isOnTop = _a.isOnTop;
if (!groups) {
return null;
}
// when this.props.groups[x].name is specified or Any of the link has child link, chevorn Expand/collaps button is shown,
// different padding is needed. _hasExpandButton marks this condition.
this._hasExpandButton = groups.some(function (group, groupIndex) {
return !!group && !!group.name || group.links && group.links.some(function (link, linkIndex) {
return !!link && !!link.links && link.links.length > 0;
});
});
var groupElements = groups.map(function (group, groupIndex) { return _this._renderGroup(group, groupIndex); });
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical },
React.createElement("nav", { role: 'navigation', className: Utilities_1.css('ms-Nav', styles.root, className, (_b = {
'is-onTop ms-u-slideRightIn40': isOnTop
},
_b[styles.rootIsOnTop] = isOnTop,
_b)) }, groupElements)));
var _b;
};
Object.defineProperty(Nav.prototype, "selectedKey", {
get: function () {
return this.state.selectedKey;
},
enumerable: true,
configurable: true
});
Nav.prototype._renderAnchorLink = function (link, linkIndex, nestingLevel) {
// Determine the appropriate padding to add before this link.
// In RTL, the "before" padding will go on the right instead of the left.
var isRtl = Utilities_1.getRTL();
var paddingBefore = (_indentationSize * nestingLevel +
(this._hasExpandButton ? _indentWithExpandButton : _indentNoExpandButton)).toString(10) + 'px';
return (React.createElement("a", { className: Utilities_1.css('ms-Nav-link', styles.link), style: (_a = {}, _a[isRtl ? 'paddingRight' : 'paddingLeft'] = paddingBefore, _a), href: link.url || 'javascript:', onClick: this._onNavAnchorLinkClicked.bind(this, link), "aria-label": link.ariaLabel, title: link.title || link.name, target: link.target },
link.iconClassName && React.createElement("i", { className: Utilities_1.css('ms-Icon', 'ms-Nav-IconLink', link.iconClassName, styles.iconLink) }),
this.props.onRenderLink(link)));
var _a;
};
Nav.prototype._renderButtonLink = function (link, linkIndex) {
return (React.createElement(Button_1.CommandButton, { className: Utilities_1.css('ms-Nav-link ms-Nav-linkButton', styles.link, (_a = {
'isOnExpanded': this._hasExpandButton
},
_a[styles.linkIsOnExpanded] = this._hasExpandButton,
_a)), href: link.url, iconProps: { iconName: link.icon }, description: link.title || link.name, onClick: this._onNavButtonLinkClicked.bind(this, link) }, link.name));
var _a;
};
Nav.prototype._renderCompositeLink = function (link, linkIndex, nestingLevel) {
var isLinkSelected = this._isLinkSelected(link);
return (React.createElement("div", { key: link.key || linkIndex, className: Utilities_1.css('ms-Nav-compositeLink', styles.compositeLink, (_a = {
' is-expanded': link.isExpanded,
'is-selected': isLinkSelected
},
_a[styles.compositeLinkIsExpanded] = link.isExpanded,
_a[styles.compositeLinkIsSelected] = isLinkSelected,
_a)) },
(nestingLevel === 0 && link.links && link.links.length > 0 ?
React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--link', styles.chevronButton, styles.chevronButtonLink), onClick: this._onLinkExpandClicked.bind(this, link), "aria-label": this.props.expandButtonAriaLabel, "aria-expanded": link.isExpanded ? 'true' : 'false' },
React.createElement("i", { className: Utilities_1.css('ms-Nav-chevron ms-Icon ms-Icon--ChevronDown', styles.chevronIcon) })) : null),
!!link.onClick ? this._renderButtonLink(link, linkIndex) : this._renderAnchorLink(link, linkIndex, nestingLevel)));
var _a;
};
Nav.prototype._renderLink = function (link, linkIndex, nestingLevel) {
return (React.createElement("li", { key: link.key || linkIndex, role: 'listitem', className: Utilities_1.css(styles.navItem) },
this._renderCompositeLink(link, linkIndex, nestingLevel),
(link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null)));
};
Nav.prototype._renderLinks = function (links, nestingLevel) {
var _this = this;
if (!links || !links.length) {
return null;
}
var linkElements = links.map(function (link, linkIndex) { return _this._renderLink(link, linkIndex, nestingLevel); });
return (React.createElement("ul", { role: 'list', "aria-label": this.props.ariaLabel, className: Utilities_1.css(styles.navItems) }, linkElements));
};
Nav.prototype._renderGroup = function (group, groupIndex) {
var isGroupExpanded = !this.state.isGroupCollapsed[group.name];
return (React.createElement("div", { key: groupIndex, className: Utilities_1.css('ms-Nav-group', styles.group, (_a = {
'is-expanded': isGroupExpanded
},
_a[styles.groupIsExpanded] = isGroupExpanded,
_a)) },
(group.name ?
React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize), onClick: this._onGroupHeaderClicked.bind(this, group.name) },
React.createElement("i", { className: Utilities_1.css('ms-Nav-chevron ms-Icon ms-Icon--ChevronDown', styles.chevronIcon, isGroupExpanded && styles.chevronIsExpanded) }),
group.name) : null),
React.createElement("div", { className: Utilities_1.css('ms-Nav-groupContent', 'ms-u-slideDownIn20', styles.groupContent) }, this._renderLinks(group.links, 0 /* nestingLevel */))));
var _a;
};
Nav.prototype._onGroupHeaderClicked = function (groupKey, ev) {
var isGroupCollapsed = this.state.isGroupCollapsed;
isGroupCollapsed[groupKey] = !isGroupCollapsed[groupKey];
this.setState({ isGroupCollapsed: isGroupCollapsed });
ev.preventDefault();
ev.stopPropagation();
};
Nav.prototype._onLinkExpandClicked = function (link, ev) {
link.isExpanded = !link.isExpanded;
this.setState({ isLinkExpandStateChanged: true });
ev.preventDefault();
ev.stopPropagation();
};
Nav.prototype._onNavAnchorLinkClicked = function (link, ev) {
if (this.props.onLinkClick) {
this.props.onLinkClick(ev, link);
}
this.setState({ selectedKey: link.key });
};
Nav.prototype._onNavButtonLinkClicked = function (link, ev) {
if (link.onClick) {
link.onClick(ev, link);
}
this.setState({ selectedKey: link.key });
};
Nav.prototype._isLinkSelected = function (link) {
// if caller passes in selectedKey, use it as first choice or
// if current state.selectedKey (from addressbar) is match to the link
if (this.props.selectedKey !== undefined) {
return link.key === this.props.selectedKey;
}
else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) {
return true;
}
// resolve is not supported for ssr
if (typeof (window) === 'undefined') {
return false;
}
if (!link.url) {
return false;
}
_urlResolver = _urlResolver || document.createElement('a');
_urlResolver.href = link.url || '';
var target = _urlResolver.href;
if (location.href === target) {
return true;
}
if (location.protocol + '//' + location.host + location.pathname === target) {
return true;
}
if (location.hash) {
// Match the hash to the url.
if (location.hash === link.url) {
return true;
}
// Match a rebased url. (e.g. #foo becomes http://hostname/foo)
_urlResolver.href = location.hash.substring(1);
return _urlResolver.href === target;
}
return false;
};
return Nav;
}(Utilities_1.BaseComponent));
Nav.defaultProps = {
groups: null,
onRenderLink: function (link) { return (React.createElement("span", { className: Utilities_1.css('ms-Nav-linkText', styles.linkText) }, link.name)); }
};
exports.Nav = Nav;
//# sourceMappingURL=Nav.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_001f3f60',
rootIsOnTop: 'rootIsOnTop_001f3f60',
navItems: 'navItems_001f3f60',
navItem: 'navItem_001f3f60',
groupContent: 'groupContent_001f3f60',
group: 'group_001f3f60',
groupIsExpanded: 'groupIsExpanded_001f3f60',
icon: 'icon_001f3f60',
iconLink: 'iconLink_001f3f60',
chevronButton: 'chevronButton_001f3f60',
chevronButtonIsGroup: 'chevronButtonIsGroup_001f3f60',
chevronIcon: 'chevronIcon_001f3f60',
chevronIsExpanded: 'chevronIsExpanded_001f3f60',
linkText: 'linkText_001f3f60',
compositeLink: 'compositeLink_001f3f60',
chevronButtonLink: 'chevronButtonLink_001f3f60',
compositeLinkIsExpanded: 'compositeLinkIsExpanded_001f3f60',
compositeLinkIsSelected: 'compositeLinkIsSelected_001f3f60',
link: 'link_001f3f60',
groupHeaderFontSize: 'groupHeaderFontSize_001f3f60',
chevronButtonGroup: 'chevronButtonGroup_001f3f60',
linkIsOnExpanded: 'linkIsOnExpanded_001f3f60',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_001f3f60{overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rootIsOnTop_001f3f60{position:absolute}.navItems_001f3f60{list-style-type:none}.navItems_001f3f60,.navItems_001f3f60>.navItem_001f3f60{padding:0}.groupContent_001f3f60{display:none;margin-bottom:40px}.group_001f3f60.groupIsExpanded_001f3f60 .groupContent_001f3f60{display:block}.icon_001f3f60{padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}html[dir=ltr] .iconLink_001f3f60{margin-right:4px}html[dir=rtl] .iconLink_001f3f60{margin-left:4px}.chevronButton_001f3f60{display:block;font-weight:400;font-size:12px;line-height:36px;margin:5px 0;padding:0 20px 0 28px;background:0 0;border:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=ltr] .chevronButton_001f3f60{text-align:left}html[dir=rtl] .chevronButton_001f3f60{text-align:right}html[dir=rtl] .chevronButton_001f3f60{padding:0 28px 0 20px}.chevronButton_001f3f60:visited{color:inherit}.chevronButton_001f3f60:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.chevronButton_001f3f60.chevronButtonIsGroup_001f3f60{width:100%;height:36px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.chevronIcon_001f3f60{position:absolute;height:36px;line-height:36px;font-size:12px;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}html[dir=ltr] .chevronIcon_001f3f60{left:8px}html[dir=rtl] .chevronIcon_001f3f60{right:8px}.chevronIsExpanded_001f3f60{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.linkText_001f3f60{vertical-align:middle}.compositeLink_001f3f60{display:block;position:relative;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60{display:block;width:26px;height:34px;position:absolute;top:1px;z-index:1;padding:0;margin:0}html[dir=ltr] .compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60{left:1px}html[dir=rtl] .compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60{right:1px}.compositeLink_001f3f60 .chevronButton_001f3f60.chevronButtonLink_001f3f60 .chevronIcon_001f3f60{position:relative}.compositeLink_001f3f60 a{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_001f3f60:hover .chevronButton_001f3f60,.compositeLink_001f3f60:hover a{background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_001f3f60.compositeLinkIsExpanded_001f3f60 .chevronIcon_001f3f60{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60,.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,.compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{content:'';position:absolute;top:0;bottom:0}html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{border-left:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{border-right:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{right:0}html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{left:0}html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=ltr] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{left:0}html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 .chevronButton_001f3f60:after,html[dir=rtl] .compositeLink_001f3f60.compositeLinkIsSelected_001f3f60 a:after{right:0}.link_001f3f60{display:block;position:relative;height:36px;line-height:36px;text-decoration:none;padding:0 20px;cursor:pointer;text-overflow:ellipsis;text-decoration:none;white-space:nowrap;overflow:hidden}.groupHeaderFontSize_001f3f60{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300}.chevronButtonGroup_001f3f60::-moz-focus-inner,.chevronButtonLink_001f3f60::-moz-focus-inner,.chevronButton_001f3f60::-moz-focus-inner,.link_001f3f60::-moz-focus-inner{border:0}.chevronButtonGroup_001f3f60,.chevronButtonLink_001f3f60,.chevronButton_001f3f60,.link_001f3f60{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .chevronButtonGroup_001f3f60:focus:after,.ms-Fabric.is-focusVisible .chevronButtonLink_001f3f60:focus:after,.ms-Fabric.is-focusVisible .chevronButton_001f3f60:focus:after,.ms-Fabric.is-focusVisible .link_001f3f60:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_001f3f60 .link_001f3f60{padding-left:20px}html[dir=rtl] .root_001f3f60 .link_001f3f60{padding-right:20px}.root_001f3f60 .link_001f3f60 .ms-Button-label{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] .root_001f3f60 .link_001f3f60.linkIsOnExpanded_001f3f60{padding-left:28px}html[dir=rtl] .root_001f3f60 .link_001f3f60.linkIsOnExpanded_001f3f60{padding-right:28px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Nav.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Nav_Basic_Example_1 = require("./examples/Nav.Basic.Example");
var Nav_FabricDemoApp_Example_1 = require("./examples/Nav.FabricDemoApp.Example");
var Nav_Nested_Example_1 = require("./examples/Nav.Nested.Example");
var Nav_ByKeys_Example_1 = require("./examples/Nav.ByKeys.Example");
var NavBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx');
var NavFabricDemoAppExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx');
var NavNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx');
var NavByKeysExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx');
var NavPage = (function (_super) {
__extends(NavPage, _super);
function NavPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
NavPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Nav', componentName: 'NavExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic Nav bar with sample links', code: NavBasicExampleCode },
React.createElement(Nav_Basic_Example_1.NavBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Navigation menu used in this Fabric React demo app', code: NavFabricDemoAppExampleCode },
React.createElement(Nav_FabricDemoApp_Example_1.NavFabricDemoAppExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nested navigation menu (without group header)', code: NavNestedExampleCode },
React.createElement(Nav_Nested_Example_1.NavNestedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Nav bar of links each with unique keys and empty urls', code: NavByKeysExampleCode },
React.createElement(Nav_ByKeys_Example_1.NavByKeysExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Nav/Nav.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Navs (also called \"left nav\" or \"navigation pane\") provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a skinnier version or be completely hidden until the user taps an icon.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use Nav for apps with many top-level navigation items that are of similar type. For example, a sports app with categories like Football, Baseball, Basketball, Soccer, and so on."),
React.createElement("li", null, "Keep the names of the navigation items brief and clear, rather than trying to be overly specific."),
React.createElement("li", null, "Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. \u201CFiles\u201D), others as adjectives (\u201CShared\u201D). Use what makes sense for users, and keep it short! "),
React.createElement("li", null, "Try to keep your app\u2019s nav in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them."),
React.createElement("li", null, "UseNav for an app with a medium to high number of top-level views or categories. If your app is very simple, you may prefer a simpler hub-and-spoke layout."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Overload your Nav. Too many items in the Nav is indicative of an app that is poorly organized or trying to do too much."),
React.createElement("li", null, "Include actions. You may reserve a space for actions, if you keep them well separated from the main Nav and their appearance makes it obvious that tapping them will execute a command instead of navigating."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return NavPage;
}(React.Component));
exports.NavPage = NavPage;
//# sourceMappingURL=NavPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Nav")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Overlay.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Overlay.js | 23.68% | (9 / 38) | 35% | (7 / 20) | 9.09% | (1 / 11) | 26.47% | (9 / 34) | |
| Overlay.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| OverlayPage.js | 30.77% | (8 / 26) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 34.78% | (8 / 23) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Overlay.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var styles = require("./Overlay.scss");
var Overlay = (function (_super) {
__extends(Overlay, _super);
function Overlay() {
return _super !== null && _super.apply(this, arguments) || this;
}
Overlay.prototype.componentDidMount = function () {
Utilities_1.disableBodyScroll();
};
Overlay.prototype.componentWillUnmount = function () {
Utilities_1.enableBodyScroll();
};
Overlay.prototype.render = function () {
var _a = this.props, isDarkThemed = _a.isDarkThemed, className = _a.className;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var modifiedClassName = Utilities_1.css('ms-Overlay', styles.root, className, (_b = {},
_b['ms-Overlay--dark ' + styles.rootIsDark] = isDarkThemed,
_b));
return (React.createElement("div", __assign({}, divProps, { className: modifiedClassName })));
var _b;
};
return Overlay;
}(Utilities_1.BaseComponent));
exports.Overlay = Overlay;
//# sourceMappingURL=Overlay.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_3e24bd80',
rootIsNone: 'rootIsNone_3e24bd80',
rootIsDark: 'rootIsDark_3e24bd80',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_3e24bd80{background-color:" }, { "theme": "whiteTranslucent40", "defaultValue": "rgba(255,255,255,.4)" }, { "rawString": ";position:absolute;bottom:0;left:0;right:0;top:0}.root_3e24bd80.rootIsNone_3e24bd80{visibility:hidden}.root_3e24bd80.rootIsDark_3e24bd80{background-color:" }, { "theme": "blackTranslucent40", "defaultValue": "rgba(0,0,0,.4)" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Overlay.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Overlay_Dark_Example_1 = require("./examples/Overlay.Dark.Example");
var Overlay_Light_Example_1 = require("./examples/Overlay.Light.Example");
var OverlayLightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx');
var OverlayDarkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx');
var OverlayPage = (function (_super) {
__extends(OverlayPage, _super);
function OverlayPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
OverlayPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Overlay', componentName: 'OverlayExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Light', code: OverlayLightExampleCode },
React.createElement(Overlay_Light_Example_1.OverlayLightExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Dark', code: OverlayDarkExampleCode },
React.createElement(Overlay_Dark_Example_1.OverlayDarkExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Overlay/Overlay.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a dark Overlay with a first-run experience."),
React.createElement("li", null, "Use a white Overlay for dialogs and panels."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use an Overlay when you want the user to interact with the UI that is being covered."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Overlay/Overlay.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return OverlayPage;
}(React.Component));
exports.OverlayPage = OverlayPage;
//# sourceMappingURL=OverlayPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Overlay")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Panel.Props.js | 100% | (11 / 11) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (11 / 11) | |
| Panel.js | 8.33% | (10 / 120) | 8.62% | (10 / 116) | 4.35% | (1 / 23) | 8.85% | (10 / 113) | |
| Panel.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| PanelPage.js | 19.05% | (8 / 42) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 20.51% | (8 / 39) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PanelType;
(function (PanelType) {
/**
* Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fluid width.
* Only used on Small screen breakpoints.
* Small: 320-479px width (full screen), 16px Left/Right padding
* Medium: <unused>
* Large: <unused>
* XLarge: <unused>
* XXLarge: <unused>
*/
PanelType[PanelType["smallFluid"] = 0] = "smallFluid";
/**
* Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fixed width.
* Small: 272px width, 16px Left/Right padding
* Medium: 340px width, 16px Left/Right padding
* Large: 340px width, 32px Left/Right padding
* XLarge: 340px width, 32px Left/Right padding
* XXLarge: 340px width, 40px Left/Right padding
*/
PanelType[PanelType["smallFixedFar"] = 1] = "smallFixedFar";
/**
* Renders the panel in 'small' mode, anchored to the near side (left in LTR mode), and has a fixed width.
* Small: 272px width, 16px Left/Right padding
* Medium: 272px width, 16px Left/Right padding
* Large: 272px width, 32px Left/Right padding
* XLarge: 272px width, 32px Left/Right padding
* XXLarge: 272px width, 32px Left/Right padding
*/
PanelType[PanelType["smallFixedNear"] = 2] = "smallFixedNear";
/**
* Renders the panel in 'medium' mode, anchored to the far side (right in LTR mode).
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: 48px fixed left margin, 32px Left/Right padding
* XLarge: 644px width, 32px Left/Right padding
* XXLarge: 643px width, 40px Left/Right padding
*/
PanelType[PanelType["medium"] = 3] = "medium";
/**
* Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fluid at XXX-Large breakpoint.
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: <adapts to medium>
* XLarge: 48px fixed left margin, 32px Left/Right padding
* XXLarge: 48px fixed left margin, 32px Left/Right padding
* XXXLarge: 48px fixed left margin, (no redlines for padding, assuming previous breakpoint)
*/
PanelType[PanelType["large"] = 4] = "large";
/**
* Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fixed at XXX-Large breakpoint.
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: <adapts to medium>
* XLarge: 48px fixed left margin, 32px Left/Right padding
* XXLarge: 48px fixed left margin, 32px Left/Right padding
* XXXLarge: 940px width, (no redlines for padding, assuming previous breakpoint)
*/
PanelType[PanelType["largeFixed"] = 5] = "largeFixed";
/**
* Renders the panel in 'extra large' mode, anchored to the far side (right in LTR mode).
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: <adapts to medium>
* XLarge: <adapts to large>
* XXLarge: 176px fixed left margin, 40px Left/Right padding
* XXXLarge: 176px fixed left margin, 40px Left/Right padding
*/
PanelType[PanelType["extraLarge"] = 6] = "extraLarge";
/**
* Renders the panel in 'custom' mode using customWidth, anchored to the far side (right in LTR mode).
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: 48px fixed left margin, 32px Left/Right padding
* XLarge: 644px width, 32px Left/Right padding
* XXLarge: 643px width, 40px Left/Right padding
*/
PanelType[PanelType["custom"] = 7] = "custom";
})(PanelType = exports.PanelType || (exports.PanelType = {}));
//# sourceMappingURL=Panel.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var index_1 = require("../FocusTrapZone/index");
var Panel_Props_1 = require("./Panel.Props");
var Layer_1 = require("../Layer/Layer");
var Overlay_1 = require("../../Overlay");
var Popup_1 = require("../../Popup");
var Button_1 = require("../../Button");
var styles = require("./Panel.scss");
// Animation class constants.
var FADE_IN_200 = 'ms-u-fadeIn200';
var FADE_OUT_200 = 'ms-u-fadeOut200';
var SLIDE_LEFT_IN_40 = 'ms-u-slideLeftIn40';
var SLIDE_LEFT_OUT_40 = 'ms-u-slideLeftOut40';
var SLIDE_RIGHT_IN_40 = 'ms-u-slideRightIn40';
var SLIDE_RIGHT_OUT_40 = 'ms-u-slideRightOut40';
var Panel = (function (_super) {
__extends(Panel, _super);
function Panel(props) {
var _this = _super.call(this, props) || this;
_this._onPanelClick = _this._onPanelClick.bind(_this);
_this._onPanelRef = _this._onPanelRef.bind(_this);
_this.state = {
isFooterSticky: false,
isOpen: !!props.isOpen,
isAnimatingOpen: props.isOpen,
isAnimatingClose: false,
id: Utilities_1.getId('Panel')
};
return _this;
}
Panel.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'resize', this._updateFooterPosition);
if (this.state.isOpen) {
this._async.setTimeout(function () {
_this.setState({
isAnimatingOpen: false
});
}, 2000);
}
};
Panel.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.isOpen !== this.state.isOpen) {
this.setState({
isOpen: true,
isAnimatingOpen: newProps.isOpen ? true : false,
isAnimatingClose: newProps.isOpen ? false : true
});
}
};
Panel.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevState.isOpen === false) {
this._updateFooterPosition();
}
if (prevState.isAnimatingClose === false &&
this.state.isAnimatingClose === true &&
this.props.onDismiss) {
this.props.onDismiss();
}
};
Panel.prototype.render = function () {
var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onRenderNavigation, onRenderNavigation = _c === void 0 ? this._onRenderNavigation : _c, _d = _a.onRenderHeader, onRenderHeader = _d === void 0 ? this._onRenderHeader : _d, _e = _a.onRenderBody, onRenderBody = _e === void 0 ? this._onRenderBody : _e, _f = _a.onRenderFooter, onRenderFooter = _f === void 0 ? this._onRenderFooter : _f;
var _g = this.state, isOpen = _g.isOpen, isAnimatingOpen = _g.isAnimatingOpen, isAnimatingClose = _g.isAnimatingClose, id = _g.id, isFooterSticky = _g.isFooterSticky;
var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false;
var isRTL = Utilities_1.getRTL();
var isOnRightSide = isRTL ? isLeft : !isLeft;
var headerTextId = id + '-headerText';
var customWidthStyles = (type === Panel_Props_1.PanelType.custom) ? { width: customWidth } : {};
if (!isOpen) {
return null;
}
var overlay;
if (isBlocking) {
overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, (_h = {},
_h[FADE_IN_200] = isAnimatingOpen,
_h[FADE_OUT_200] = isAnimatingClose,
_h)), isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null }));
}
return (React.createElement(Layer_1.Layer, __assign({}, layerProps),
React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.props.onDismiss },
React.createElement("div", { ref: this._onPanelRef, className: Utilities_1.css('ms-Panel', styles.root, className, (_j = {},
// because the RTL animations are not being used, we need to set a class
_j['is-open ' + styles.rootIsOpen] = isOpen,
_j['ms-Panel--smFluid ' + styles.rootIsSmallFluid] = type === Panel_Props_1.PanelType.smallFluid,
_j['ms-Panel--smLeft ' + styles.rootIsSmallLeft] = type === Panel_Props_1.PanelType.smallFixedNear,
_j['ms-Panel--sm ' + styles.rootIsSmall] = type === Panel_Props_1.PanelType.smallFixedFar,
_j['ms-Panel--md ' + styles.rootIsMedium] = type === Panel_Props_1.PanelType.medium,
_j['ms-Panel--lg ' + styles.rootIsLarge] = type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed,
_j['ms-Panel--fixed ' + styles.rootIsFixed] = type === Panel_Props_1.PanelType.largeFixed,
_j['ms-Panel--xl ' + styles.rootIsXLarge] = type === Panel_Props_1.PanelType.extraLarge,
_j['ms-Panel--custom ' + styles.rootIsCustom] = type === Panel_Props_1.PanelType.custom,
_j['ms-Panel--hasCloseButton ' + styles.rootHasCloseButton] = hasCloseButton,
_j)) },
overlay,
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', styles.main, (_k = {},
_k[SLIDE_RIGHT_IN_40] = isAnimatingOpen && !isOnRightSide,
_k[SLIDE_LEFT_IN_40] = isAnimatingOpen && isOnRightSide,
_k[SLIDE_LEFT_OUT_40] = isAnimatingClose && !isOnRightSide,
_k[SLIDE_RIGHT_OUT_40] = isAnimatingClose && isOnRightSide,
_k)), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector },
React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)),
React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) },
onRenderHeader(this.props, this._onRenderHeader),
onRenderBody(this.props, this._onRenderBody),
onRenderFooter(this.props, this._onRenderFooter)))))));
var _h, _j, _k;
};
Panel.prototype.dismiss = function () {
if (this.state.isOpen) {
this.setState({
isAnimatingOpen: false,
isAnimatingClose: true
});
}
};
Panel.prototype._onRenderNavigation = function (props) {
var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
return (hasCloseButton &&
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton), onClick: this._onPanelClick, "aria-label": closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } }));
};
Panel.prototype._onRenderHeader = function (props) {
var headerText = props.headerText, headerTextId = props.headerTextId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
return (headerText &&
React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) },
React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: headerTextId, role: 'heading' }, headerText)));
};
Panel.prototype._onRenderBody = function (props) {
return (React.createElement("div", { className: Utilities_1.css('ms-Panel-content', styles.content), ref: this._resolveRef('_content') }, props.children));
};
Panel.prototype._onRenderFooter = function (props) {
var isFooterSticky = this.state.isFooterSticky;
var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
return (onRenderFooterContent != null &&
React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
};
Panel.prototype._updateFooterPosition = function () {
var _content = this._content;
if (_content) {
var height = _content.clientHeight;
var innerHeight_1 = _content.scrollHeight;
this.setState({
isFooterSticky: height < innerHeight_1 ? true : false
});
}
};
Panel.prototype._onPanelClick = function () {
this.dismiss();
};
Panel.prototype._onPanelRef = function (ref) {
if (ref) {
this._events.on(ref, 'animationend', this._onAnimationEnd);
}
else {
this._events.off();
}
};
Panel.prototype._onAnimationEnd = function (ev) {
if (ev.animationName.indexOf('In') > -1) {
this.setState({
isOpen: true,
isAnimatingOpen: false
});
}
if (ev.animationName.indexOf('Out') > -1) {
this.setState({
isOpen: false,
isAnimatingClose: false
});
if (this.props.onDismissed) {
this.props.onDismissed();
}
}
};
return Panel;
}(Utilities_1.BaseComponent));
Panel.defaultProps = {
isOpen: false,
isBlocking: true,
hasCloseButton: true,
type: Panel_Props_1.PanelType.smallFixedFar,
};
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderNavigation", null);
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderHeader", null);
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderBody", null);
__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderFooter", null);
exports.Panel = Panel;
//# sourceMappingURL=Panel.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_317d2582',
overlay: 'overlay_317d2582',
main: 'main_317d2582',
rootIsSmall: 'rootIsSmall_317d2582',
rootIsSmallLeft: 'rootIsSmallLeft_317d2582',
rootIsSmallFluid: 'rootIsSmallFluid_317d2582',
rootIsMedium: 'rootIsMedium_317d2582',
rootIsLarge: 'rootIsLarge_317d2582',
rootIsXLarge: 'rootIsXLarge_317d2582',
rootIsCustom: 'rootIsCustom_317d2582',
rootIsFixed: 'rootIsFixed_317d2582',
rootIsOpen: 'rootIsOpen_317d2582',
closeButton: 'closeButton_317d2582',
contentInner: 'contentInner_317d2582',
rootHasCloseButton: 'rootHasCloseButton_317d2582',
header: 'header_317d2582',
content: 'content_317d2582',
footerInner: 'footerInner_317d2582',
footer: 'footer_317d2582',
footerIsSticky: 'footerIsSticky_317d2582',
headerText: 'headerText_317d2582',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_317d2582{display:none;pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0}.root_317d2582 .overlay_317d2582{display:none;pointer-events:none;opacity:1;cursor:pointer;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.main_317d2582{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;width:100%;bottom:0;top:0;display:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}html[dir=ltr] .main_317d2582{right:0}html[dir=rtl] .main_317d2582{left:0}@media (min-width:480px){.main_317d2582{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}html[dir=ltr] .main_317d2582{left:auto}html[dir=rtl] .main_317d2582{right:auto}}.root_317d2582.rootIsSmall_317d2582 .main_317d2582{width:272px}@media (min-width:480px){.root_317d2582.rootIsSmall_317d2582 .main_317d2582{width:340px}}.root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{width:272px}html[dir=ltr] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{right:auto}html[dir=rtl] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{left:auto}html[dir=ltr] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{left:0}html[dir=rtl] .root_317d2582.rootIsSmallLeft_317d2582 .main_317d2582{right:0}.root_317d2582.rootIsSmallFluid_317d2582 .main_317d2582{width:100%}@media (min-width:640px){.root_317d2582.rootIsCustom_317d2582 .main_317d2582,.root_317d2582.rootIsLarge_317d2582 .main_317d2582,.root_317d2582.rootIsMedium_317d2582 .main_317d2582,.root_317d2582.rootIsXLarge_317d2582 .main_317d2582{width:auto}html[dir=ltr] .root_317d2582.rootIsCustom_317d2582 .main_317d2582,html[dir=ltr] .root_317d2582.rootIsLarge_317d2582 .main_317d2582,html[dir=ltr] .root_317d2582.rootIsMedium_317d2582 .main_317d2582,html[dir=ltr] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{left:48px}html[dir=rtl] .root_317d2582.rootIsCustom_317d2582 .main_317d2582,html[dir=rtl] .root_317d2582.rootIsLarge_317d2582 .main_317d2582,html[dir=rtl] .root_317d2582.rootIsMedium_317d2582 .main_317d2582,html[dir=rtl] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{right:48px}}@media (min-width:1024px){.root_317d2582.rootIsMedium_317d2582 .main_317d2582{width:643px}html[dir=ltr] .root_317d2582.rootIsMedium_317d2582 .main_317d2582{left:auto}html[dir=rtl] .root_317d2582.rootIsMedium_317d2582 .main_317d2582{right:auto}}@media (min-width:1366px){html[dir=ltr] .root_317d2582.rootIsLarge_317d2582 .main_317d2582{left:428px}html[dir=rtl] .root_317d2582.rootIsLarge_317d2582 .main_317d2582{right:428px}}@media (min-width:1366px){.root_317d2582.rootIsLarge_317d2582.rootIsFixed_317d2582 .main_317d2582{width:940px}html[dir=ltr] .root_317d2582.rootIsLarge_317d2582.rootIsFixed_317d2582 .main_317d2582{left:auto}html[dir=rtl] .root_317d2582.rootIsLarge_317d2582.rootIsFixed_317d2582 .main_317d2582{right:auto}}@media (min-width:1366px){html[dir=ltr] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{left:176px}html[dir=rtl] .root_317d2582.rootIsXLarge_317d2582 .main_317d2582{right:176px}}@media (min-width:1024px){html[dir=ltr] .root_317d2582.rootIsCustom_317d2582 .main_317d2582{left:auto}html[dir=rtl] .root_317d2582.rootIsCustom_317d2582 .main_317d2582{right:auto}}.root_317d2582.rootIsOpen_317d2582{display:block}.root_317d2582.rootIsOpen_317d2582 .main_317d2582{opacity:1;pointer-events:auto;display:block}.root_317d2582.rootIsOpen_317d2582 .overlay_317d2582{cursor:pointer;display:block;pointer-events:auto}@media screen and (-ms-high-contrast:active){.root_317d2582.rootIsOpen_317d2582 .overlay_317d2582{opacity:0}}.closeButton_317d2582{background:0 0;border:0;cursor:pointer;position:absolute;top:0;height:40px;width:40px;line-height:40px;padding:0;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:16px}html[dir=ltr] .closeButton_317d2582{right:8px}html[dir=rtl] .closeButton_317d2582{left:8px}.closeButton_317d2582:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.contentInner_317d2582{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-overflow-scrolling:touch;-webkit-transform:translateZ(0);transform:translateZ(0)}.rootHasCloseButton_317d2582 .contentInner_317d2582{top:40px}.content_317d2582,.footerInner_317d2582,.header_317d2582{padding-left:16px;padding-right:16px}@media (min-width:640px){.content_317d2582,.footerInner_317d2582,.header_317d2582{padding-left:32px;padding-right:32px}}@media (min-width:1366px){.content_317d2582,.footerInner_317d2582,.header_317d2582{padding-left:40px;padding-right:40px}}.header_317d2582{margin:14px 0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}@media (min-width:1024px){.header_317d2582{margin-top:30px}}.content_317d2582{margin-bottom:0;overflow-y:auto}.footer_317d2582{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid transparent;transition:border 367ms cubic-bezier(.1,.25,.75,.9)}.footerInner_317d2582{padding-bottom:20px;padding-top:20px}.footerIsSticky_317d2582{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-top-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.headerText_317d2582{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";line-height:32px;margin:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Panel.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Panel_SmallRight_Example_1 = require("./examples/Panel.SmallRight.Example");
var Panel_SmallLeft_Example_1 = require("./examples/Panel.SmallLeft.Example");
var Panel_SmallFluid_Example_1 = require("./examples/Panel.SmallFluid.Example");
var Panel_Medium_Example_1 = require("./examples/Panel.Medium.Example");
var Panel_Large_Example_1 = require("./examples/Panel.Large.Example");
var Panel_LargeFixed_Example_1 = require("./examples/Panel.LargeFixed.Example");
var Panel_ExtraLarge_Example_1 = require("./examples/Panel.ExtraLarge.Example");
var Panel_Custom_Example_1 = require("./examples/Panel.Custom.Example");
var Panel_LightDismiss_Example_1 = require("./examples/Panel.LightDismiss.Example");
var Panel_NonModal_Example_1 = require("./examples/Panel.NonModal.Example");
var PanelSmallRightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx');
var PanelSmallLeftExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx');
var PanelSmallFluidExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx');
var PanelMediumExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx');
var PanelLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx');
var PanelLargeFixedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx');
var PanelExtraLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx');
var PanelCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx');
var PanelLightDismissExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx');
var PanelNonModalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx');
var PanelPage = (function (_super) {
__extends(PanelPage, _super);
function PanelPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PanelPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Panel', componentName: 'PanelExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Anchored Right, Fixed Width', code: PanelSmallRightExampleCode },
React.createElement(Panel_SmallRight_Example_1.PanelSmallRightExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Anchored Left, Fixed Width', code: PanelSmallLeftExampleCode },
React.createElement(Panel_SmallLeft_Example_1.PanelSmallLeftExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Full Screen, Fluid Width', code: PanelSmallFluidExampleCode },
React.createElement(Panel_SmallFluid_Example_1.PanelSmallFluidExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Medium', code: PanelMediumExampleCode },
React.createElement(Panel_Medium_Example_1.PanelMediumExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Large', code: PanelLargeExampleCode },
React.createElement(Panel_Large_Example_1.PanelLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - LargeFixed', code: PanelLargeFixedExampleCode },
React.createElement(Panel_LargeFixed_Example_1.PanelLargeFixedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Extra Large', code: PanelExtraLargeExampleCode },
React.createElement(Panel_ExtraLarge_Example_1.PanelExtraLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Custom', code: PanelCustomExampleCode },
React.createElement(Panel_Custom_Example_1.PanelCustomExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Light Dismiss', code: PanelLightDismissExampleCode },
React.createElement(Panel_LightDismiss_Example_1.PanelLightDismissExample, null)),
",",
React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Non-Modal', code: PanelNonModalExampleCode },
React.createElement(Panel_NonModal_Example_1.PanelNonModalExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Panel/Panel.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel."),
React.createElement("h2", { className: 'ms-font-xl' }, "Examples of experiences that use Panels"),
React.createElement("ul", null,
React.createElement("li", null, "Member or group list creation or management"),
React.createElement("li", null, "Document list creation or management"),
React.createElement("li", null, "Permissions creation or management"),
React.createElement("li", null, "Settings creation or management"),
React.createElement("li", null, "Multi-field forms"))), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use for self-contained experiences where the user does not need to interact with the app view to complete the task. "),
React.createElement("li", null, "Use for complex creation, edit or management experiences."),
React.createElement("li", null, "Consider how the panel and its contained contents will scale across Fabric\u2019s responsive web breakpoints."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use for experiences where the user needs to interact with the app view. Use a Pane (which pushes content, doesn\u2019t use an overlay, and sits on the same z-index as the rest of the UI) instead."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Panel/Panel.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PanelPage;
}(React.Component));
exports.PanelPage = PanelPage;
//# sourceMappingURL=PanelPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Panel")); __export(require("./Panel.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Persona.Props.js | 100% | (37 / 37) | 100% | (6 / 6) | 100% | (3 / 3) | 100% | (37 / 37) | |
| Persona.js | 11.36% | (10 / 88) | 14.71% | (10 / 68) | 7.14% | (1 / 14) | 12.35% | (10 / 81) | |
| Persona.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| PersonaConsts.js | 42.86% | (3 / 7) | 100% | (0 / 0) | 100% | (0 / 0) | 42.86% | (3 / 7) | |
| PersonaPage.js | 28.57% | (8 / 28) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 32% | (8 / 25) | |
| index.js | 37.5% | (3 / 8) | 0% | (0 / 2) | 0% | (0 / 1) | 50% | (3 / 6) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PersonaSize;
(function (PersonaSize) {
PersonaSize[PersonaSize["tiny"] = 0] = "tiny";
PersonaSize[PersonaSize["extraExtraSmall"] = 1] = "extraExtraSmall";
PersonaSize[PersonaSize["extraSmall"] = 2] = "extraSmall";
PersonaSize[PersonaSize["small"] = 3] = "small";
PersonaSize[PersonaSize["regular"] = 4] = "regular";
PersonaSize[PersonaSize["large"] = 5] = "large";
PersonaSize[PersonaSize["extraLarge"] = 6] = "extraLarge";
PersonaSize[PersonaSize["size28"] = 7] = "size28";
})(PersonaSize = exports.PersonaSize || (exports.PersonaSize = {}));
var PersonaPresence;
(function (PersonaPresence) {
PersonaPresence[PersonaPresence["none"] = 0] = "none";
PersonaPresence[PersonaPresence["offline"] = 1] = "offline";
PersonaPresence[PersonaPresence["online"] = 2] = "online";
PersonaPresence[PersonaPresence["away"] = 3] = "away";
PersonaPresence[PersonaPresence["dnd"] = 4] = "dnd";
PersonaPresence[PersonaPresence["blocked"] = 5] = "blocked";
PersonaPresence[PersonaPresence["busy"] = 6] = "busy";
})(PersonaPresence = exports.PersonaPresence || (exports.PersonaPresence = {}));
var PersonaInitialsColor;
(function (PersonaInitialsColor) {
PersonaInitialsColor[PersonaInitialsColor["lightBlue"] = 0] = "lightBlue";
PersonaInitialsColor[PersonaInitialsColor["blue"] = 1] = "blue";
PersonaInitialsColor[PersonaInitialsColor["darkBlue"] = 2] = "darkBlue";
PersonaInitialsColor[PersonaInitialsColor["teal"] = 3] = "teal";
PersonaInitialsColor[PersonaInitialsColor["lightGreen"] = 4] = "lightGreen";
PersonaInitialsColor[PersonaInitialsColor["green"] = 5] = "green";
PersonaInitialsColor[PersonaInitialsColor["darkGreen"] = 6] = "darkGreen";
PersonaInitialsColor[PersonaInitialsColor["lightPink"] = 7] = "lightPink";
PersonaInitialsColor[PersonaInitialsColor["pink"] = 8] = "pink";
PersonaInitialsColor[PersonaInitialsColor["magenta"] = 9] = "magenta";
PersonaInitialsColor[PersonaInitialsColor["purple"] = 10] = "purple";
PersonaInitialsColor[PersonaInitialsColor["black"] = 11] = "black";
PersonaInitialsColor[PersonaInitialsColor["orange"] = 12] = "orange";
PersonaInitialsColor[PersonaInitialsColor["red"] = 13] = "red";
PersonaInitialsColor[PersonaInitialsColor["darkRed"] = 14] = "darkRed";
})(PersonaInitialsColor = exports.PersonaInitialsColor || (exports.PersonaInitialsColor = {}));
//# sourceMappingURL=Persona.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Image_1 = require("../../Image");
var Persona_Props_1 = require("./Persona.Props");
var PersonaConsts_1 = require("./PersonaConsts");
var styles = require("./Persona.scss");
// The RGB color swatches
var COLOR_SWATCHES_LOOKUP = [
Persona_Props_1.PersonaInitialsColor.lightGreen,
Persona_Props_1.PersonaInitialsColor.lightBlue,
Persona_Props_1.PersonaInitialsColor.lightPink,
Persona_Props_1.PersonaInitialsColor.green,
Persona_Props_1.PersonaInitialsColor.darkGreen,
Persona_Props_1.PersonaInitialsColor.pink,
Persona_Props_1.PersonaInitialsColor.magenta,
Persona_Props_1.PersonaInitialsColor.purple,
Persona_Props_1.PersonaInitialsColor.black,
Persona_Props_1.PersonaInitialsColor.teal,
Persona_Props_1.PersonaInitialsColor.blue,
Persona_Props_1.PersonaInitialsColor.darkBlue,
Persona_Props_1.PersonaInitialsColor.orange,
Persona_Props_1.PersonaInitialsColor.darkRed,
Persona_Props_1.PersonaInitialsColor.red
];
var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;
var Persona = (function (_super) {
__extends(Persona, _super);
function Persona(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isImageLoaded: false,
};
return _this;
}
Persona.prototype.render = function () {
var _a = this.props, className = _a.className, size = _a.size, imageUrl = _a.imageUrl, initialsColor = _a.initialsColor, presence = _a.presence, primaryText = _a.primaryText, secondaryText = _a.secondaryText, tertiaryText = _a.tertiaryText, optionalText = _a.optionalText, hidePersonaDetails = _a.hidePersonaDetails, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, onRenderPrimaryText = _a.onRenderPrimaryText, onRenderSecondaryText = _a.onRenderSecondaryText, onRenderTertiaryText = _a.onRenderTertiaryText, onRenderOptionalText = _a.onRenderOptionalText, imageShouldStartVisible = _a.imageShouldStartVisible;
initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText);
var presenceElement = null;
if (presence !== Persona_Props_1.PersonaPresence.none) {
var userPresence = Persona_Props_1.PersonaPresence[presence], statusIcon = null;
switch (userPresence) {
case 'online':
userPresence = 'SkypeCheck';
break;
case 'away':
userPresence = 'SkypeClock';
break;
case 'dnd':
userPresence = 'SkypeMinus';
break;
default:
userPresence = '';
}
if (userPresence) {
var iconClass = Utilities_1.css("ms-Persona-presenceIcon ms-Icon ms-Icon--" + userPresence, styles.presenceIcon);
statusIcon = React.createElement("i", { className: iconClass });
}
presenceElement = React.createElement("div", { className: Utilities_1.css('ms-Persona-presence', styles.presence) }, statusIcon);
}
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var personaDetails = React.createElement("div", { className: Utilities_1.css('ms-Persona-details', styles.details) },
this._renderElement(this.props.primaryText, Utilities_1.css('ms-Persona-primaryText', styles.primaryText), onRenderPrimaryText),
this._renderElement(this.props.secondaryText, Utilities_1.css('ms-Persona-secondaryText', styles.secondaryText), onRenderSecondaryText),
this._renderElement(this.props.tertiaryText, Utilities_1.css('ms-Persona-tertiaryText', styles.tertiaryText), onRenderTertiaryText),
this._renderElement(this.props.optionalText, Utilities_1.css('ms-Persona-optionalText', styles.optionalText), onRenderOptionalText),
this.props.children);
return (React.createElement("div", __assign({}, divProps, { className: Utilities_1.css('ms-Persona', styles.root, className, PersonaConsts_1.PERSONA_SIZE[size], PersonaConsts_1.PERSONA_PRESENCE[presence]) }),
size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea) },
!this.state.isImageLoaded &&
(React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]), "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }))),
presenceElement,
(!hidePersonaDetails || (size === Persona_Props_1.PersonaSize.tiny)) && personaDetails));
};
Persona.prototype._renderElement = function (text, className, render) {
return (React.createElement("div", { className: className }, render ? render(this.props) : text));
};
Persona.prototype._onRenderInitials = function (props) {
var imageInitials = props.imageInitials, primaryText = props.primaryText;
var isRTL = Utilities_1.getRTL();
imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL);
return (React.createElement("span", null, imageInitials));
};
Persona.prototype._getColorFromName = function (displayName) {
var color = Persona_Props_1.PersonaInitialsColor.blue;
if (!displayName) {
return color;
}
var hashCode = 0;
for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {
var ch = displayName.charCodeAt(iLen);
var shift = iLen % 8;
// tslint:disable-next-line:no-bitwise
hashCode ^= (ch << shift) + (ch >> (8 - shift));
}
color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];
return color;
};
Persona.prototype._onPhotoLoadingStateChange = function (loadState) {
this.setState({
isImageLoaded: loadState === Image_1.ImageLoadState.loaded
});
};
return Persona;
}(Utilities_1.BaseComponent));
Persona.defaultProps = {
primaryText: '',
size: Persona_Props_1.PersonaSize.regular,
presence: Persona_Props_1.PersonaPresence.none
};
__decorate([
Utilities_1.autobind
], Persona.prototype, "_renderElement", null);
__decorate([
Utilities_1.autobind
], Persona.prototype, "_onRenderInitials", null);
__decorate([
Utilities_1.autobind
], Persona.prototype, "_onPhotoLoadingStateChange", null);
exports.Persona = Persona;
//# sourceMappingURL=Persona.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 4 4 4 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_55c3f64b',
contextualHost: 'contextualHost_55c3f64b',
imageArea: 'imageArea_55c3f64b',
image: 'image_55c3f64b',
placeholder: 'placeholder_55c3f64b',
initials: 'initials_55c3f64b',
initialsIsLightBlue: 'initialsIsLightBlue_55c3f64b',
initialsIsBlue: 'initialsIsBlue_55c3f64b',
initialsIsDarkBlue: 'initialsIsDarkBlue_55c3f64b',
initialsIsTeal: 'initialsIsTeal_55c3f64b',
initialsIsLightGreen: 'initialsIsLightGreen_55c3f64b',
initialsIsGreen: 'initialsIsGreen_55c3f64b',
initialsIsDarkGreen: 'initialsIsDarkGreen_55c3f64b',
initialsIsLightPink: 'initialsIsLightPink_55c3f64b',
initialsIsPink: 'initialsIsPink_55c3f64b',
initialsIsMagenta: 'initialsIsMagenta_55c3f64b',
initialsIsPurple: 'initialsIsPurple_55c3f64b',
initialsIsBlack: 'initialsIsBlack_55c3f64b',
initialsIsOrange: 'initialsIsOrange_55c3f64b',
initialsIsRed: 'initialsIsRed_55c3f64b',
initialsIsDarkRed: 'initialsIsDarkRed_55c3f64b',
presence: 'presence_55c3f64b',
presenceIcon: 'presenceIcon_55c3f64b',
details: 'details_55c3f64b',
primaryText: 'primaryText_55c3f64b',
secondaryText: 'secondaryText_55c3f64b',
tertiaryText: 'tertiaryText_55c3f64b',
optionalText: 'optionalText_55c3f64b',
textContent: 'textContent_55c3f64b',
rootIsTiny: 'rootIsTiny_55c3f64b',
rootIsReadonly: 'rootIsReadonly_55c3f64b',
rootIsExtraExtraSmall: 'rootIsExtraExtraSmall_55c3f64b',
rootIs28: 'rootIs28_55c3f64b',
rootIsExtraSmall: 'rootIsExtraSmall_55c3f64b',
rootIsSmall: 'rootIsSmall_55c3f64b',
rootIsLarge: 'rootIsLarge_55c3f64b',
rootIsExtraLarge: 'rootIsExtraLarge_55c3f64b',
rootIsDarkText: 'rootIsDarkText_55c3f64b',
rootIsSelectable: 'rootIsSelectable_55c3f64b',
rootExtraLarge: 'rootExtraLarge_55c3f64b',
rootIsAvailable: 'rootIsAvailable_55c3f64b',
rootIsAway: 'rootIsAway_55c3f64b',
rootIsBlocked: 'rootIsBlocked_55c3f64b',
rootIsBusy: 'rootIsBusy_55c3f64b',
rootIsDoNotDisturb: 'rootIsDoNotDisturb_55c3f64b',
rootIsOffline: 'rootIsOffline_55c3f64b',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_55c3f64b{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;line-height:1;position:relative;height:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.root_55c3f64b .contextualHost_55c3f64b{display:none}.imageArea_55c3f64b{position:relative;overflow:hidden;text-align:center;-webkit-box-flex:0;-ms-flex:0 0 48px;flex:0 0 48px;height:48px;width:48px;border-radius:50%}@media screen and (-ms-high-contrast:active){.imageArea_55c3f64b{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.imageArea_55c3f64b{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.imageArea_55c3f64b .image_55c3f64b{border:0}.placeholder_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.initials_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:17px;font-weight:100;line-height:46px;height:48px}.initials_55c3f64b.initialsIsLightBlue_55c3f64b{background-color:#6ba5e7}.initials_55c3f64b.initialsIsBlue_55c3f64b{background-color:#2d89ef}.initials_55c3f64b.initialsIsDarkBlue_55c3f64b{background-color:#2b5797}.initials_55c3f64b.initialsIsTeal_55c3f64b{background-color:#00aba9}.initials_55c3f64b.initialsIsLightGreen_55c3f64b{background-color:#99b433}.initials_55c3f64b.initialsIsGreen_55c3f64b{background-color:#00a300}.initials_55c3f64b.initialsIsDarkGreen_55c3f64b{background-color:#1e7145}.initials_55c3f64b.initialsIsLightPink_55c3f64b{background-color:#e773bd}.initials_55c3f64b.initialsIsPink_55c3f64b{background-color:#ff0097}.initials_55c3f64b.initialsIsMagenta_55c3f64b{background-color:#7e3878}.initials_55c3f64b.initialsIsPurple_55c3f64b{background-color:#603cba}.initials_55c3f64b.initialsIsBlack_55c3f64b{background-color:#1d1d1d}.initials_55c3f64b.initialsIsOrange_55c3f64b{background-color:#da532c}.initials_55c3f64b.initialsIsRed_55c3f64b{background-color:#e11}.initials_55c3f64b.initialsIsDarkRed_55c3f64b{background-color:#b91d47}.image_55c3f64b{position:absolute;top:0;width:100%;height:100%;border-radius:50%;-webkit-perspective:1px;perspective:1px}html[dir=ltr] .image_55c3f64b{margin-right:10px}html[dir=rtl] .image_55c3f64b{margin-left:10px}html[dir=ltr] .image_55c3f64b{left:0}html[dir=rtl] .image_55c3f64b{right:0}.image_55c3f64b[src=\"\"]{display:none}.presence_55c3f64b{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;bottom:-1px;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";text-align:center;box-sizing:content-box;-ms-high-contrast-adjust:none}html[dir=ltr] .presence_55c3f64b{left:34px}html[dir=rtl] .presence_55c3f64b{right:34px}@media screen and (-ms-high-contrast:active){.presence_55c3f64b{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_55c3f64b{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.presence_55c3f64b .presenceIcon_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:8px;line-height:12px;vertical-align:top}@media screen and (-ms-high-contrast:active){.presence_55c3f64b .presenceIcon_55c3f64b{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_55c3f64b .presenceIcon_55c3f64b{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.details_55c3f64b{padding:0 24px 0 12px;min-width:0;width:100%}html[dir=rtl] .details_55c3f64b{padding:0 12px 0 24px}html[dir=ltr] .details_55c3f64b{text-align:left}html[dir=rtl] .details_55c3f64b{text-align:right}.optionalText_55c3f64b,.primaryText_55c3f64b,.secondaryText_55c3f64b,.tertiaryText_55c3f64b,.textContent_55c3f64b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primaryText_55c3f64b{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.optionalText_55c3f64b,.secondaryText_55c3f64b,.tertiaryText_55c3f64b{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.secondaryText_55c3f64b{padding-top:3px}.optionalText_55c3f64b,.tertiaryText_55c3f64b{padding-top:5px;display:none}.root_55c3f64b.rootIsTiny_55c3f64b{height:30px;min-width:30px}.root_55c3f64b.rootIsTiny_55c3f64b .imageArea_55c3f64b{overflow:visible;background:0 0;height:0;width:0}.root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{top:10px;border:0}html[dir=ltr] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{right:auto}html[dir=rtl] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{left:auto}html[dir=ltr] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{left:0}html[dir=rtl] .root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{right:0}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{top:9px;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsTiny_55c3f64b .presence_55c3f64b{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}html[dir=ltr] .root_55c3f64b.rootIsTiny_55c3f64b .details_55c3f64b{padding-left:20px}html[dir=rtl] .root_55c3f64b.rootIsTiny_55c3f64b .details_55c3f64b{padding-right:20px}.root_55c3f64b.rootIsTiny_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:4px}.root_55c3f64b.rootIsTiny_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIsTiny_55c3f64b.rootIsReadonly_55c3f64b{padding:0;background-color:transparent}.root_55c3f64b.rootIsTiny_55c3f64b.rootIsReadonly_55c3f64b .primaryText_55c3f64b:after{content:';'}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b{height:24px;line-height:24px;min-width:24px;margin-right:4px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 24px;flex:0 0 24px;height:24px;width:24px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .placeholder_55c3f64b{font-size:18px;top:4px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .initials_55c3f64b{font-size:11px;height:24px;line-height:24px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presence_55c3f64b{height:8px;width:8px;border:4px solid #fff}html[dir=ltr] .root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presence_55c3f64b{left:16px}html[dir=rtl] .root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presence_55c3f64b{right:16px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .presenceIcon_55c3f64b{font-size:6px;line-height:9px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:3px}.root_55c3f64b.rootIsExtraExtraSmall_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIs28_55c3f64b{height:28px;line-height:28px;min-width:28px}.root_55c3f64b.rootIs28_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIs28_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 28px;flex:0 0 28px;height:28px;width:28px}.root_55c3f64b.rootIs28_55c3f64b .placeholder_55c3f64b{font-size:18px;top:4px}.root_55c3f64b.rootIs28_55c3f64b .initials_55c3f64b{font-size:11px;height:24px;line-height:24px}.root_55c3f64b.rootIs28_55c3f64b .presence_55c3f64b{height:8px;width:8px;border:4px solid #fff}html[dir=ltr] .root_55c3f64b.rootIs28_55c3f64b .presence_55c3f64b{left:16px}html[dir=rtl] .root_55c3f64b.rootIs28_55c3f64b .presence_55c3f64b{right:16px}.root_55c3f64b.rootIs28_55c3f64b .presenceIcon_55c3f64b{font-size:6px;line-height:9px}.root_55c3f64b.rootIs28_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:3px}.root_55c3f64b.rootIs28_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIsExtraSmall_55c3f64b{height:32px;line-height:32px;min-width:32px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsExtraSmall_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px;height:32px;width:32px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .placeholder_55c3f64b{font-size:28px;top:6px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .initials_55c3f64b{font-size:14px;height:32px;line-height:32px}html[dir=ltr] .root_55c3f64b.rootIsExtraSmall_55c3f64b .presence_55c3f64b{left:19px}html[dir=rtl] .root_55c3f64b.rootIsExtraSmall_55c3f64b .presence_55c3f64b{right:19px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .primaryText_55c3f64b{font-size:14px;padding-top:3px}.root_55c3f64b.rootIsExtraSmall_55c3f64b .secondaryText_55c3f64b{display:none}.root_55c3f64b.rootIsSmall_55c3f64b{height:40px;line-height:40px;min-width:40px}.root_55c3f64b.rootIsSmall_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsSmall_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;height:40px;width:40px}.root_55c3f64b.rootIsSmall_55c3f64b .placeholder_55c3f64b{font-size:38px;top:5px}.root_55c3f64b.rootIsSmall_55c3f64b .initials_55c3f64b{font-size:14px;height:40px;line-height:40px}html[dir=ltr] .root_55c3f64b.rootIsSmall_55c3f64b .presence_55c3f64b{left:27px}html[dir=rtl] .root_55c3f64b.rootIsSmall_55c3f64b .presence_55c3f64b{right:27px}.root_55c3f64b.rootIsSmall_55c3f64b .primaryText_55c3f64b{font-size:14px}.root_55c3f64b.rootIsSmall_55c3f64b .primaryText_55c3f64b,.root_55c3f64b.rootIsSmall_55c3f64b .secondaryText_55c3f64b{padding-top:1px}.root_55c3f64b.rootIsLarge_55c3f64b{height:72px;line-height:72px;min-width:72px}.root_55c3f64b.rootIsLarge_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsLarge_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 72px;flex:0 0 72px;height:72px;width:72px}.root_55c3f64b.rootIsLarge_55c3f64b .placeholder_55c3f64b{font-size:67px;top:10px}.root_55c3f64b.rootIsLarge_55c3f64b .initials_55c3f64b{font-size:28px;height:72px;line-height:70px}.root_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b{height:20px;width:20px;border-width:3px}html[dir=ltr] .root_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b{left:49px}html[dir=rtl] .root_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b{right:49px}.root_55c3f64b.rootIsLarge_55c3f64b .presenceIcon_55c3f64b{line-height:20px;font-size:14px}.root_55c3f64b.rootIsLarge_55c3f64b .secondaryText_55c3f64b{padding-top:3px}.root_55c3f64b.rootIsLarge_55c3f64b .tertiaryText_55c3f64b{padding-top:5px;display:block}.root_55c3f64b.rootIsExtraLarge_55c3f64b{height:100px;line-height:100px;min-width:100px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .imageArea_55c3f64b,.root_55c3f64b.rootIsExtraLarge_55c3f64b .image_55c3f64b{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;height:100px;width:100px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .placeholder_55c3f64b{font-size:95px;top:12px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .initials_55c3f64b{font-size:42px;height:100px;line-height:96px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b{height:28px;width:28px;border-width:4px}html[dir=ltr] .root_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b{left:71px}html[dir=rtl] .root_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b{right:71px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .presenceIcon_55c3f64b{line-height:28px;font-size:21px;position:relative;top:1px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .primaryText_55c3f64b{font-size:21px;font-weight:300;margin-top:0}.root_55c3f64b.rootIsExtraLarge_55c3f64b .secondaryText_55c3f64b{padding-top:2px}.root_55c3f64b.rootIsExtraLarge_55c3f64b .optionalText_55c3f64b,.root_55c3f64b.rootIsExtraLarge_55c3f64b .tertiaryText_55c3f64b{padding-top:5px;display:block}.root_55c3f64b.rootIsDarkText_55c3f64b .primaryText_55c3f64b{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_55c3f64b.rootIsDarkText_55c3f64b .optionalText_55c3f64b,.root_55c3f64b.rootIsDarkText_55c3f64b .secondaryText_55c3f64b,.root_55c3f64b.rootIsDarkText_55c3f64b .tertiaryText_55c3f64b{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.root_55c3f64b.rootIsSelectable_55c3f64b{cursor:pointer;padding:0 10px}.root_55c3f64b.rootIsSelectable_55c3f64b:not(.rootExtraLarge_55c3f64b):focus,.root_55c3f64b.rootIsSelectable_55c3f64b:not(.rootExtraLarge_55c3f64b):hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";outline:1px solid transparent}.root_55c3f64b.rootIsAvailable_55c3f64b .presence_55c3f64b{background-color:#7fba00}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsAvailable_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsAvailable_55c3f64b .presence_55c3f64b{background-color:#600000}}.root_55c3f64b.rootIsAway_55c3f64b .presence_55c3f64b{background-color:#fcd116}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsAway_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsAway_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_55c3f64b.rootIsAway_55c3f64b .presenceIcon_55c3f64b{position:relative}html[dir=ltr] .root_55c3f64b.rootIsAway_55c3f64b .presenceIcon_55c3f64b{left:1px}html[dir=rtl] .root_55c3f64b.rootIsAway_55c3f64b .presenceIcon_55c3f64b{right:1px}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{content:'';width:100%;height:100%;position:absolute;top:0;box-shadow:0 0 0 2px #d93b3b inset;border-radius:50%}html[dir=ltr] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{left:0}html[dir=rtl] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{right:0}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{content:'';width:100%;height:2px;background-color:#d93b3b;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:absolute;top:5px}html[dir=ltr] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{left:0}html[dir=rtl] .root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{right:0}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b{color:#0f0;background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{box-shadow:0 0 0 2px #0f0 inset}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b{color:#600000;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::before{box-shadow:0 0 0 2px #600000 inset}.root_55c3f64b.rootIsBlocked_55c3f64b .presence_55c3f64b::after{background-color:#600000}}.root_55c3f64b.rootIsBlocked_55c3f64b.rootIsLarge_55c3f64b .presence_55c3f64b::after{top:9px}.root_55c3f64b.rootIsBlocked_55c3f64b.rootIsExtraLarge_55c3f64b .presence_55c3f64b::after{top:13px}.root_55c3f64b.rootIsBusy_55c3f64b .presence_55c3f64b{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsBusy_55c3f64b .presence_55c3f64b{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsBusy_55c3f64b .presence_55c3f64b{background-color:#600000}}.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b{background-color:#e81123}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:#0f0}.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b::before{background-color:#0f0}.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b::after{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsDoNotDisturb_55c3f64b .presence_55c3f64b{background-color:#600000}}.root_55c3f64b.rootIsOffline_55c3f64b .presence_55c3f64b{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.root_55c3f64b.rootIsOffline_55c3f64b .presence_55c3f64b{background-color:#0f0;box-shadow:0 0 0 1px " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": " inset}}@media screen and (-ms-high-contrast:black-on-white){.root_55c3f64b.rootIsOffline_55c3f64b .presence_55c3f64b{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:0 0 0 1px " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": " inset}}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Persona.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Persona_Props_1 = require("./Persona.Props");
var styles = require("./Persona.scss");
exports.PERSONA_SIZE = (_a = {},
_a[Persona_Props_1.PersonaSize.tiny] = 'ms-Persona--tiny ' + styles.rootIsTiny,
_a[Persona_Props_1.PersonaSize.extraExtraSmall] = 'ms-Persona--xxs ' + styles.rootIsExtraExtraSmall,
_a[Persona_Props_1.PersonaSize.extraSmall] = 'ms-Persona--xs ' + styles.rootIsExtraSmall,
_a[Persona_Props_1.PersonaSize.small] = 'ms-Persona--sm ' + styles.rootIsSmall,
_a[Persona_Props_1.PersonaSize.regular] = '',
_a[Persona_Props_1.PersonaSize.large] = 'ms-Persona--lg ' + styles.rootIsLarge,
_a[Persona_Props_1.PersonaSize.extraLarge] = 'ms-Persona--xl ' + styles.rootIsExtraLarge,
_a[Persona_Props_1.PersonaSize.size28] = 'ms-Persona--28 ' + styles.rootIs28,
_a);
exports.PERSONA_PRESENCE = (_b = {},
_b[Persona_Props_1.PersonaPresence.offline] = 'ms-Persona--offline ' + styles.rootIsOffline,
_b[Persona_Props_1.PersonaPresence.online] = 'ms-Persona--online ',
_b[Persona_Props_1.PersonaPresence.away] = 'ms-Persona--away ' + styles.rootIsAway,
_b[Persona_Props_1.PersonaPresence.dnd] = 'ms-Persona--dnd ' + styles.rootIsDoNotDisturb,
_b[Persona_Props_1.PersonaPresence.blocked] = 'ms-Persona--blocked ' + styles.rootIsBlocked,
_b[Persona_Props_1.PersonaPresence.busy] = 'ms-Persona--busy ' + styles.rootIsBusy,
_b);
exports.PERSONA_INITIALS_COLOR = (_c = {},
_c[Persona_Props_1.PersonaInitialsColor.lightBlue] = 'ms-Persona-initials--lightBlue ' + styles.initialsIsLightBlue,
_c[Persona_Props_1.PersonaInitialsColor.blue] = 'ms-Persona-initials--blue ' + styles.initialsIsBlue,
_c[Persona_Props_1.PersonaInitialsColor.darkBlue] = 'ms-Persona-initials--darkBlue ' + styles.initialsIsDarkBlue,
_c[Persona_Props_1.PersonaInitialsColor.teal] = 'ms-Persona-initials--teal ' + styles.initialsIsTeal,
_c[Persona_Props_1.PersonaInitialsColor.lightGreen] = 'ms-Persona-initials--lightGreen ' + styles.initialsIsLightGreen,
_c[Persona_Props_1.PersonaInitialsColor.green] = 'ms-Persona-initials--green ' + styles.initialsIsGreen,
_c[Persona_Props_1.PersonaInitialsColor.darkGreen] = 'ms-Persona-initials--darkGreen ' + styles.initialsIsDarkGreen,
_c[Persona_Props_1.PersonaInitialsColor.lightPink] = 'ms-Persona-initials--lightPink ' + styles.initialsIsLightPink,
_c[Persona_Props_1.PersonaInitialsColor.pink] = 'ms-Persona-initials--pink ' + styles.initialsIsPink,
_c[Persona_Props_1.PersonaInitialsColor.magenta] = 'ms-Persona-initials--magenta ' + styles.initialsIsMagenta,
_c[Persona_Props_1.PersonaInitialsColor.purple] = 'ms-Persona-initials--purple ' + styles.initialsIsPurple,
_c[Persona_Props_1.PersonaInitialsColor.black] = 'ms-Persona-initials--black ' + styles.initialsIsBlack,
_c[Persona_Props_1.PersonaInitialsColor.orange] = 'ms-Persona-initials--orange ' + styles.initialsIsGreen,
_c[Persona_Props_1.PersonaInitialsColor.red] = 'ms-Persona-initials--red ' + styles.initialsIsRed,
_c[Persona_Props_1.PersonaInitialsColor.darkRed] = 'ms-Persona-initials--darkRed ' + styles.initialsIsDarkRed,
_c);
var _a, _b, _c;
//# sourceMappingURL=PersonaConsts.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Persona_Initials_Example_1 = require("./examples/Persona.Initials.Example");
var Persona_Basic_Example_1 = require("./examples/Persona.Basic.Example");
var Persona_CustomRender_Example_1 = require("./examples/Persona.CustomRender.Example");
var PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx');
var PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx');
var PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx');
var PersonaPage = (function (_super) {
__extends(PersonaPage, _super);
function PersonaPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PersonaPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Persona', componentName: 'PersonaExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Persona in various sizes', code: PersonaBasicExampleCode },
React.createElement(Persona_Basic_Example_1.PersonaBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Persona in initials', code: PersonaInitialsExampleCode },
React.createElement(Persona_Initials_Example_1.PersonaInitialsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom persona text', code: PersonaCustomRenderExampleCode },
React.createElement(Persona_CustomRender_Example_1.PersonaCustomRenderExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use XXS size Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations."),
React.createElement("li", null, "Use XS size Persona in text fields in edit mode."),
React.createElement("li", null, "Use XS, S and M size Personas in menus and list views."),
React.createElement("li", null, "Use L and XXL size Personas in profile cards and views."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Change the values of the color swatches in high contrast mode. "))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Persona/Persona.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PersonaPage;
}(React.Component));
exports.PersonaPage = PersonaPage;
//# sourceMappingURL=PersonaPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Persona")); __export(require("./Persona.Props")); __export(require("./PersonaConsts")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Pivot.Props.js | 100% | (9 / 9) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (9 / 9) | |
| Pivot.js | 7.89% | (9 / 114) | 9.33% | (7 / 75) | 4.76% | (1 / 21) | 8.33% | (9 / 108) | |
| Pivot.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| PivotItem.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| PivotItem.js | 31.03% | (9 / 29) | 35% | (7 / 20) | 11.11% | (1 / 9) | 36% | (9 / 25) | |
| PivotPage.js | 20% | (8 / 40) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 21.62% | (8 / 37) | |
| index.js | 33.33% | (3 / 9) | 0% | (0 / 2) | 0% | (0 / 1) | 42.86% | (3 / 7) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PivotLinkFormat;
(function (PivotLinkFormat) {
/**
* Display Pivot Links as links
*/
PivotLinkFormat[PivotLinkFormat["links"] = 0] = "links";
/**
* Display Pivot Links as Tabs
*/
PivotLinkFormat[PivotLinkFormat["tabs"] = 1] = "tabs";
})(PivotLinkFormat = exports.PivotLinkFormat || (exports.PivotLinkFormat = {}));
var PivotLinkSize;
(function (PivotLinkSize) {
/**
* Display Link using normal font size
*/
PivotLinkSize[PivotLinkSize["normal"] = 0] = "normal";
/**
* Display links using large font size
*/
PivotLinkSize[PivotLinkSize["large"] = 1] = "large";
})(PivotLinkSize = exports.PivotLinkSize || (exports.PivotLinkSize = {}));
//# sourceMappingURL=Pivot.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var FocusZone_1 = require("../../FocusZone");
var PivotItem_1 = require("./PivotItem");
var Pivot_Props_1 = require("./Pivot.Props");
var Pivot_Props_2 = require("./Pivot.Props");
var styles = require("./Pivot.scss");
var Pivot = (function (_super) {
__extends(Pivot, _super);
function Pivot(props) {
var _this = _super.call(this, props) || this;
_this._pivotId = Utilities_1.getId('Pivot');
var links = _this._getPivotLinks(_this.props);
var selectedKey;
if (props.initialSelectedKey) {
selectedKey = props.initialSelectedKey;
}
else if (props.initialSelectedIndex) {
selectedKey = links[props.initialSelectedIndex].itemKey;
}
else if (props.selectedKey) {
selectedKey = props.selectedKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
_this.state = {
links: links,
selectedKey: selectedKey,
selectedTabId: _this._keyToTabIds[selectedKey],
};
_this._renderLink = _this._renderLink.bind(_this);
return _this;
}
Pivot.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var links = this._getPivotLinks(nextProps);
this.setState(function (prevState, props) {
var selectedKey;
if (_this._isKeyValid(nextProps.selectedKey)) {
selectedKey = nextProps.selectedKey;
}
else if (_this._isKeyValid(prevState.selectedKey)) {
selectedKey = prevState.selectedKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
return {
links: links,
selectedKey: selectedKey,
selectedTabId: _this._keyToTabIds[selectedKey],
};
});
};
Pivot.prototype.render = function () {
return (React.createElement("div", null,
this._renderPivotLinks(),
this._renderPivotItem()));
};
/**
* Renders the set of links to route between pivots
*/
Pivot.prototype._renderPivotLinks = function () {
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement("ul", { className: Utilities_1.css('ms-Pivot', styles.root, (_a = {}, _a['ms-Pivot--large ' + styles.rootIsLarge] = this.props.linkSize === Pivot_Props_2.PivotLinkSize.large, _a), (_b = {}, _b['ms-Pivot--tabs ' + styles.rootIsTabs] = this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs, _b)), role: 'tablist' }, this.state.links.map(this._renderLink))));
var _a, _b;
};
/**
* Renders a pivot link
*/
Pivot.prototype._renderLink = function (link) {
var itemKey = link.itemKey;
var tabId = this._keyToTabIds[itemKey];
var onRenderItemLink = link.onRenderItemLink;
var linkContent;
if (onRenderItemLink) {
linkContent = onRenderItemLink(link, this._renderLinkContent);
}
else {
linkContent = this._renderLinkContent(link);
}
return (React.createElement(Button_1.CommandButton, { id: tabId, key: itemKey, className: Utilities_1.css('ms-Pivot-link', styles.link, (_a = {},
_a['is-selected ' + styles.linkIsSelected] = this.state.selectedKey === itemKey,
_a)), onClick: this._onLinkClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), ariaLabel: link.ariaLabel, role: 'tab', "aria-selected": this.state.selectedKey === itemKey }, linkContent));
var _a;
};
Pivot.prototype._renderLinkContent = function (link) {
var itemCount = link.itemCount, itemIcon = link.itemIcon, linkText = link.linkText;
return React.createElement("span", { className: Utilities_1.css('ms-Pivot-link-content') },
itemIcon !== undefined && (React.createElement("span", { className: Utilities_1.css('ms-Pivot-icon', styles.icon) },
React.createElement("i", { className: "ms-Icon ms-Icon--" + itemIcon }))),
linkText !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-text', styles.text) },
" ",
link.linkText),
itemCount !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-count', styles.count) },
" (",
itemCount,
")"));
};
/**
* Renders the current Pivot Item
*/
Pivot.prototype._renderPivotItem = function () {
var itemKey = this.state.selectedKey;
var index = this._keyToIndexMapping[itemKey];
var selectedTabId = this.state.selectedTabId;
return (React.createElement("div", { role: 'tabpanel', "aria-labelledby": selectedTabId }, React.Children.toArray(this.props.children)[index]));
};
/**
* Gets the set of PivotLinks as arrary of IPivotItemProps
* The set of Links is determined by child components of type PivotItem
*/
Pivot.prototype._getPivotLinks = function (props) {
var _this = this;
var links = [];
this._keyToIndexMapping = {};
this._keyToTabIds = {};
React.Children.map(props.children, function (child, index) {
if (typeof child === 'object' && child.type === PivotItem_1.PivotItem) {
var pivotItem = child;
var itemKey = pivotItem.props.itemKey || index.toString();
links.push({
linkText: pivotItem.props.linkText,
ariaLabel: pivotItem.props.ariaLabel,
itemKey: itemKey,
itemCount: pivotItem.props.itemCount,
itemIcon: pivotItem.props.itemIcon,
onRenderItemLink: pivotItem.props.onRenderItemLink
});
_this._keyToIndexMapping[itemKey] = index;
_this._keyToTabIds[itemKey] = _this._pivotId + ("-Tab" + index);
}
});
return links;
};
/**
* whether the key exists in the pivot items.
*/
Pivot.prototype._isKeyValid = function (itemKey) {
return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
};
/**
* Handles the onClick event on PivotLinks
*/
Pivot.prototype._onLinkClick = function (itemKey, ev) {
ev.preventDefault();
this._updateSelectedItem(itemKey, ev);
};
/**
* Handle the onKeyPress eventon the PivotLinks
*/
Pivot.prototype._onKeyPress = function (itemKey, ev) {
ev.preventDefault();
if (ev.which === Utilities_1.KeyCodes.enter) {
this._updateSelectedItem(itemKey);
}
};
/**
* Updates the state with the new selected index
*/
Pivot.prototype._updateSelectedItem = function (itemKey, ev) {
this.setState({
selectedKey: itemKey,
selectedTabId: this._keyToTabIds[itemKey]
});
if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
var index = this._keyToIndexMapping[itemKey];
// React.Element<any> cannot directly convert to PivotItem.
var item = React.Children.toArray(this.props.children)[index];
if (typeof item === 'object' && item.type === PivotItem_1.PivotItem) {
this.props.onLinkClick(item, ev);
}
}
};
return Pivot;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], Pivot.prototype, "_renderLink", null);
__decorate([
Utilities_1.autobind
], Pivot.prototype, "_renderLinkContent", null);
exports.Pivot = Pivot;
//# sourceMappingURL=Pivot.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_a22d1d8d',
links: 'links_a22d1d8d',
link: 'link_a22d1d8d',
text: 'text_a22d1d8d',
count: 'count_a22d1d8d',
icon: 'icon_a22d1d8d',
linkIsSelected: 'linkIsSelected_a22d1d8d',
linkIsDisabled: 'linkIsDisabled_a22d1d8d',
linkIsOverflow: 'linkIsOverflow_a22d1d8d',
ellipsis: 'ellipsis_a22d1d8d',
rootIsLarge: 'rootIsLarge_a22d1d8d',
rootIsTabs: 'rootIsTabs_a22d1d8d',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_a22d1d8d{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400;position:relative;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";white-space:nowrap}.links_a22d1d8d{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.link_a22d1d8d{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;font-size:14px;font-weight:400;line-height:40px;padding:0 8px;text-align:center;position:relative;background-color:transparent;border:0}html[dir=ltr] .link_a22d1d8d{margin-right:8px}html[dir=rtl] .link_a22d1d8d{margin-left:8px}.link_a22d1d8d:hover{cursor:pointer}.link_a22d1d8d:focus{outline:0}.link_a22d1d8d::before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color 267ms cubic-bezier(.1,.25,.75,.9)}.link_a22d1d8d::after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.link_a22d1d8d .count_a22d1d8d,.link_a22d1d8d .text_a22d1d8d{display:inline-block;vertical-align:top}html[dir=ltr] .link_a22d1d8d .icon_a22d1d8d+.text_a22d1d8d{margin-left:4px}html[dir=rtl] .link_a22d1d8d .icon_a22d1d8d+.text_a22d1d8d{margin-right:4px}html[dir=ltr] .link_a22d1d8d .count_a22d1d8d{margin-left:4px}html[dir=rtl] .link_a22d1d8d .count_a22d1d8d{margin-right:4px}.link_a22d1d8d.linkIsSelected_a22d1d8d{font-weight:600}.link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.link_a22d1d8d.linkIsDisabled_a22d1d8d{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.ms-Fabric.is-focusVisible .link_a22d1d8d:focus{outline:1px solid " }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d.linkIsSelected_a22d1d8d{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d:focus:not(.linkIsSelected_a22d1d8d),.link_a22d1d8d.linkIsOverflow_a22d1d8d:hover:not(.linkIsSelected_a22d1d8d){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.link_a22d1d8d.linkIsOverflow_a22d1d8d:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ellipsis_a22d1d8d{font-size:15px;position:relative;top:0}.root_a22d1d8d.rootIsLarge_a22d1d8d .link_a22d1d8d{font-size:17px}.root_a22d1d8d.rootIsLarge_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d::after{font-size:17px}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{height:40px;line-height:40px;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";padding:0 10px;vertical-align:top}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d::-moz-focus-inner{border:0}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{margin-right:0}html[dir=rtl] .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d{margin-left:0}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:focus:not(.linkIsSelected_a22d1d8d):not(.linkIsOverflow_a22d1d8d),.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:hover:not(.linkIsSelected_a22d1d8d):not(.linkIsOverflow_a22d1d8d){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:active{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d::before{background-color:transparent;transition:none;position:absolute;top:0;left:0;right:0;bottom:0;content:'';height:auto}@media screen and (-ms-high-contrast:active){.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d::before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d::before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d:focus:not(.linkIsSelected_a22d1d8d),.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d:hover:not(.linkIsSelected_a22d1d8d){background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsOverflow_a22d1d8d:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ms-Fabric.is-focusVisible .root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d:focus:before{height:auto;background:0 0;transition:none}@media screen and (-ms-high-contrast:active){.root_a22d1d8d.rootIsTabs_a22d1d8d .link_a22d1d8d.linkIsSelected_a22d1d8d{font-weight:600}}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Pivot.scss.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=PivotItem.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var PivotItem = (function (_super) {
__extends(PivotItem, _super);
function PivotItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
PivotItem.prototype.render = function () {
return (React.createElement("div", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)), this.props.children));
};
return PivotItem;
}(Utilities_1.BaseComponent));
exports.PivotItem = PivotItem;
//# sourceMappingURL=PivotItem.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Pivot_Basic_Example_1 = require("./examples/Pivot.Basic.Example");
var Pivot_IconCount_Example_1 = require("./examples/Pivot.IconCount.Example");
var Pivot_Large_Example_1 = require("./examples/Pivot.Large.Example");
var Pivot_Tabs_Example_1 = require("./examples/Pivot.Tabs.Example");
var Pivot_TabsLarge_Example_1 = require("./examples/Pivot.TabsLarge.Example");
var Pivot_Fabric_Example_1 = require("./examples/Pivot.Fabric.Example");
var Pivot_OnChange_Example_1 = require("./examples/Pivot.OnChange.Example");
var Pivot_Remove_Example_1 = require("./examples/Pivot.Remove.Example");
var Pivot_Override_Example_1 = require("./examples/Pivot.Override.Example");
var PivotRemoveExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx');
var PivotBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx');
var PivotLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx');
var PivotTabsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx');
var PivotTabsLargesExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx');
var PivotFabricExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx');
var PivotOnChangeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx');
var PivotIconCountExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx');
var PivotOverrideExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx');
var PivotPage = (function (_super) {
__extends(PivotPage, _super);
function PivotPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PivotPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Pivot', componentName: 'PivotExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic example', code: PivotBasicExampleCode },
React.createElement(Pivot_Basic_Example_1.PivotBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Count and Icon', code: PivotIconCountExampleCode },
React.createElement(Pivot_IconCount_Example_1.PivotIconCountExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Large link size', code: PivotLargeExampleCode },
React.createElement(Pivot_Large_Example_1.PivotLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Links of tab style', code: PivotTabsExampleCode },
React.createElement(Pivot_Tabs_Example_1.PivotTabsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Links of large tab style', code: PivotTabsLargesExampleCode },
React.createElement(Pivot_TabsLarge_Example_1.PivotTabsLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Trigger onchange event', code: PivotOnChangeExampleCode },
React.createElement(Pivot_OnChange_Example_1.PivotOnChangeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering nested components within the Pivot', code: PivotFabricExampleCode },
React.createElement(Pivot_Fabric_Example_1.PivotFabricExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Show/Hide pivot item', code: PivotRemoveExampleCode },
React.createElement(Pivot_Remove_Example_1.PivotRemoveExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Override selected item', code: PivotOverrideExampleCode },
React.createElement(Pivot_Override_Example_1.PivotOverrideExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content."),
React.createElement("ul", null,
React.createElement("li", null, "Tapping on a pivot item header navigates to that header's section content."),
React.createElement("li", null, "Swiping left or right on a pivot item header navigates to the adjacent section."),
React.createElement("li", null, "Swiping left or right on section content navigates to the adjacent section. "),
React.createElement("li", null, "Pivots are stationary when all pivot headers fit within the allowed space."),
React.createElement("li", null, "Pivots carousel when all pivot headers don't fit within the allowed space.")),
React.createElement("p", null, "Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use on content-heavy pages that require a significant amount of scrolling to access the various sections."),
React.createElement("li", null, "Be concise on the navigation labels, ideally one or two words rather than a phrase."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use on pages which doesn\u2019t scroll."),
React.createElement("li", null, "Don\u2019t use the Pivot to link to a new page."),
React.createElement("li", null, "Don\u2019t use the Pivot to link to hidden content."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Pivot/Pivot.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PivotPage;
}(React.Component));
exports.PivotPage = PivotPage;
//# sourceMappingURL=PivotPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Pivot")); var PivotItem_1 = require("./PivotItem"); exports.PivotItem = PivotItem_1.PivotItem; __export(require("./Pivot.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Popup.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Popup.js | 16.13% | (10 / 62) | 18.18% | (10 / 55) | 6.25% | (1 / 16) | 18.18% | (10 / 55) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Popup.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
/**
* This adds accessibility to Dialog and Panel controls
*/
var Popup = (function (_super) {
__extends(Popup, _super);
function Popup() {
return _super !== null && _super.apply(this, arguments) || this;
}
Popup.prototype.componentWillMount = function () {
this._originalFocusedElement = Utilities_1.getDocument().activeElement;
};
Popup.prototype.componentDidMount = function () {
this._events.on(this.refs.root, 'focus', this._onFocus, true);
this._events.on(this.refs.root, 'blur', this._onBlur, true);
if (Utilities_1.doesElementContainFocus(this.refs.root)) {
this._containsFocus = true;
}
};
Popup.prototype.componentWillUnmount = function () {
if (this.props.shouldRestoreFocus &&
this._originalFocusedElement &&
this._containsFocus &&
this._originalFocusedElement !== window) {
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
// to reset the focus back to the thing it thinks should have been focused.
if (this._originalFocusedElement) {
this._originalFocusedElement.focus();
}
}
};
Popup.prototype.render = function () {
var _a = this.props, role = _a.role, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
return (React.createElement("div", __assign({ ref: 'root' }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: className, role: role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown }), this.props.children));
};
Popup.prototype._onKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.escape:
if (this.props.onDismiss) {
this.props.onDismiss(ev);
ev.preventDefault();
ev.stopPropagation();
}
break;
}
};
Popup.prototype._onFocus = function () {
this._containsFocus = true;
};
Popup.prototype._onBlur = function () {
this._containsFocus = false;
};
return Popup;
}(Utilities_1.BaseComponent));
Popup.defaultProps = {
shouldRestoreFocus: true
};
__decorate([
Utilities_1.autobind
], Popup.prototype, "_onKeyDown", null);
exports.Popup = Popup;
//# sourceMappingURL=Popup.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Popup")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ProgressIndicator.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| ProgressIndicator.js | 25.81% | (8 / 31) | 26.67% | (4 / 15) | 12.5% | (1 / 8) | 28.57% | (8 / 28) | |
| ProgressIndicator.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| ProgressIndicatorPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=ProgressIndicator.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 6 6 6 1 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var styles = require("./ProgressIndicator.scss");
// if the percentComplete is near 0, don't animate it.
// This prevents animations on reset to 0 scenarios
var ZERO_THRESHOLD = 0.01;
var ProgressIndicator = (function (_super) {
__extends(ProgressIndicator, _super);
function ProgressIndicator(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
title: 'label'
});
return _this;
}
ProgressIndicator.prototype.render = function () {
var _a = this.props, title = _a.title, label = _a.label, description = _a.description, percentComplete = _a.percentComplete, className = _a.className, ariaValueText = _a.ariaValueText;
// Handle deprecated value.
if (title) {
label = title;
}
percentComplete = Math.min(100, Math.max(0, percentComplete * 100));
return (React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator', styles.root, className) },
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemName', styles.itemName) }, label),
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemProgress', styles.itemProgress) },
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressTrack', styles.progressTrack) }),
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressBar', styles.progressBar, {
'smoothTransition': percentComplete > ZERO_THRESHOLD
}), style: { width: percentComplete + '%' }, role: 'progressbar', "aria-valuemin": '0', "aria-valuemax": '100', "aria-valuenow": percentComplete.toFixed().toString(), "aria-valuetext": ariaValueText })),
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }, description)));
};
return ProgressIndicator;
}(Utilities_1.BaseComponent));
ProgressIndicator.defaultProps = {
label: '',
description: '',
percentComplete: 0,
width: 180
};
exports.ProgressIndicator = ProgressIndicator;
//# sourceMappingURL=ProgressIndicator.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_bd79c24d',
itemName: 'itemName_bd79c24d',
itemDescription: 'itemDescription_bd79c24d',
itemProgress: 'itemProgress_bd79c24d',
progressTrack: 'progressTrack_bd79c24d',
progressBar: 'progressBar_bd79c24d',
smoothTransition: 'smoothTransition_bd79c24d',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_bd79c24d{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.itemName_bd79c24d{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.itemDescription_bd79c24d{color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:11px;line-height:18px}.itemProgress_bd79c24d{position:relative;height:2px;padding:8px 0}.progressTrack_bd79c24d{position:absolute;width:100%;height:2px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";outline:1px solid transparent}.progressBar_bd79c24d{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.progressBar_bd79c24d{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.progressBar_bd79c24d{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.smoothTransition_bd79c24d{transition-property:width;transition-timing-function:linear;transition-duration:150ms}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ProgressIndicator.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var ProgressIndicator_Basic_Example_1 = require("./examples/ProgressIndicator.Basic.Example");
var ProgressIndicatorBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Basic.Example.tsx');
var ProgressIndicatorPage = (function (_super) {
__extends(ProgressIndicatorPage, _super);
function ProgressIndicatorPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ProgressIndicatorPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'ProgressIndicator', componentName: 'ProgressIndicatorExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'ProgressIndicator', code: ProgressIndicatorBasicExampleCode },
React.createElement(ProgressIndicator_Basic_Example_1.ProgressIndicatorBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "ProgressIndicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped."),
React.createElement("p", null, "ProgressIndicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include:"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("strong", null, "[Object]"),
" is being ",
React.createElement("strong", null, "[operation name]"),
", or"),
React.createElement("li", null,
React.createElement("strong", null, "[Object]"),
" is being ",
React.createElement("strong", null, "[operation name]"),
" to ",
React.createElement("strong", null, "[destination name]"),
" or"),
React.createElement("li", null,
React.createElement("strong", null, "[Object]"),
" is being ",
React.createElement("strong", null, "[operation name]"),
" from ",
React.createElement("strong", null, "[source name]"),
" to ",
React.createElement("strong", null, "[destination name]"))),
React.createElement("p", null, "Status text is generally in units elapsed and total units. If the operation can be canceled, an \u201CX\u201D icon is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark."),
React.createElement("p", null, "Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201Crewinding\u201D the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a ProgressIndicator when the total units to completion is known"),
React.createElement("li", null, "Display operation description"),
React.createElement("li", null, "Show text above and/or below the bar"),
React.createElement("li", null, "Combine steps of a single operation into one bar"))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a ProgressIndicator when the total units to completion is indeterminate"),
React.createElement("li", null, "Use only a single word description"),
React.createElement("li", null, "Show text to the right or left of the bar"),
React.createElement("li", null, "Cause progress to \u201Crewind\u201D to show new steps"))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/ProgressIndicator/ProgressIndicator.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return ProgressIndicatorPage;
}(React.Component));
exports.ProgressIndicatorPage = ProgressIndicatorPage;
//# sourceMappingURL=ProgressIndicatorPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./ProgressIndicator")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Rating.Props.js | 100% | (5 / 5) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (5 / 5) | |
| Rating.js | 12.7% | (8 / 63) | 14.81% | (4 / 27) | 5.88% | (1 / 17) | 13.33% | (8 / 60) | |
| Rating.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| RatingPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 7 8 9 10 11 | 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RatingSize;
(function (RatingSize) {
RatingSize[RatingSize["Small"] = 0] = "Small";
RatingSize[RatingSize["Large"] = 1] = "Large";
})(RatingSize = exports.RatingSize || (exports.RatingSize = {}));
//# sourceMappingURL=Rating.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 6 6 6 1 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Rating_Props_1 = require("./Rating.Props");
var styles = require("./Rating.scss");
var Rating = (function (_super) {
__extends(Rating, _super);
function Rating(props) {
var _this = _super.call(this, props) || this;
_this.state = {
rating: _this._getInitialValue(props),
focusedRating: null
};
_this._id = Utilities_1.getId('Rating');
_this._labelId = Utilities_1.getId('RatingLabel');
return _this;
}
Rating.prototype.componentWillReceiveProps = function (nextProps) {
if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
this.setState({
rating: this._getClampedRating(nextProps.rating)
});
}
};
Rating.prototype.render = function () {
var stars = [];
for (var i = this.props.min; i <= this.props.max; ++i) {
stars.push(this._renderStar(i));
}
return React.createElement("div", { className: Utilities_1.css('ms-Rating', this.props.className, (_a = {},
_a['ms-Rating--large ' + styles.rootIsLarge] = this.props.size === Rating_Props_1.RatingSize.Large,
_a)), role: 'application' },
React.createElement("div", { className: Utilities_1.css('ms-Rating-container', styles.container), role: 'radiogroup', "aria-labelledby": this.props.ariaLabelId }, stars));
var _a;
};
Rating.prototype._renderStar = function (rating) {
var inputId = this._id + "-" + rating;
return React.createElement("div", { className: Utilities_1.css('ms-Rating-star', styles.star, (_a = {},
_a['is-selected ' + styles.starIsSelected] = rating <= this.state.rating,
_a['is-inFocus ' + styles.starIsInFocus] = rating === this.state.focusedRating,
_a['is-disabled ' + styles.starIsDisabled] = this.props.disabled,
_a)), key: rating },
React.createElement("input", { className: Utilities_1.css('ms-Rating-input', styles.input), type: 'radio', name: this._id, id: inputId, value: rating, "aria-labelledby": this._labelId + "-" + rating, disabled: this.props.disabled, checked: rating === this.state.rating, onChange: this._onChange.bind(this, rating), onFocus: this._onFocus.bind(this, rating), onBlur: this._onBlur.bind(this, rating) }),
React.createElement("label", { className: Utilities_1.css('ms-Rating-label', styles.label), htmlFor: inputId },
this._getLabel(rating),
this._getIcon()));
var _a;
};
Rating.prototype._onFocus = function (value, ev) {
this.setState({
focusedRating: value
});
};
Rating.prototype._onBlur = function (option, ev) {
this.setState({
focusedRating: null
});
};
Rating.prototype._onChange = function (rating, evt) {
this.setState({
rating: rating
});
var onChanged = this.props.onChanged;
if (onChanged) {
onChanged(rating);
}
};
Rating.prototype._getLabel = function (rating) {
var text = this.props.ariaLabelIcon || 'Star';
return (React.createElement("span", { id: this._labelId + "-" + rating, className: Utilities_1.css('ms-Rating-labelText', styles.labelText) }, rating + " " + text));
};
Rating.prototype._getIcon = function () {
return React.createElement("i", { className: Utilities_1.css('ms-Icon', this.props.icon || 'ms-Icon--FavoriteStarFill') });
};
Rating.prototype._getInitialValue = function (props) {
if (typeof props.rating === 'undefined') {
return props.min;
}
if (props.rating === null) {
return null;
}
return this._getClampedRating(props.rating);
};
Rating.prototype._getClampedRating = function (rating) {
rating = Math.floor(rating);
return Math.min(Math.max(rating, this.props.min), this.props.max);
};
return Rating;
}(Utilities_1.BaseComponent));
Rating.defaultProps = {
min: 1,
max: 5
};
exports.Rating = Rating;
//# sourceMappingURL=Rating.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
input: 'input_7b9b7f98',
container: 'container_7b9b7f98',
star: 'star_7b9b7f98',
starIsDisabled: 'starIsDisabled_7b9b7f98',
starIsSelected: 'starIsSelected_7b9b7f98',
label: 'label_7b9b7f98',
rootIsLarge: 'rootIsLarge_7b9b7f98',
labelText: 'labelText_7b9b7f98',
starIsInFocus: 'starIsInFocus_7b9b7f98',
};
load_themed_styles_1.loadStyles([{ "rawString": ".input_7b9b7f98{position:absolute;opacity:0;top:0}.container_7b9b7f98{position:relative;display:inline-block}.container_7b9b7f98:hover .star_7b9b7f98:not(.starIsDisabled_7b9b7f98){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_7b9b7f98:hover .star_7b9b7f98:not(.starIsDisabled_7b9b7f98).star_7b9b7f98:hover{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.container_7b9b7f98:hover .star_7b9b7f98:not(.starIsDisabled_7b9b7f98).star_7b9b7f98:hover~.star_7b9b7f98{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98{display:inline-block;text-align:center;color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98.starIsSelected_7b9b7f98{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98.starIsDisabled_7b9b7f98{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.container_7b9b7f98 .star_7b9b7f98.starIsDisabled_7b9b7f98 .label_7b9b7f98{cursor:default}.container_7b9b7f98 .star_7b9b7f98 .label_7b9b7f98{display:inline-block;cursor:pointer;font-size:16px;padding:12px 0;border:1px solid transparent}.rootIsLarge_7b9b7f98 .container_7b9b7f98 .label_7b9b7f98{font-size:20px;padding:6px 2px 9px 2px}.labelText_7b9b7f98{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-Fabric.is-focusVisible .starIsInFocus_7b9b7f98 .label_7b9b7f98{border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Rating.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Rating_Basic_Example_1 = require("./examples/Rating.Basic.Example");
var RatingBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx');
var RatingPage = (function (_super) {
__extends(RatingPage, _super);
function RatingPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
RatingPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Rating', componentName: 'RatingExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Rating', code: RatingBasicExampleCode },
React.createElement(Rating_Basic_Example_1.RatingBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Rating/Rating.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Ratings provide insight regarding others\u2019 opinions and experiences with a product, helping users make more-informed purchasing decisions. Users can also rate products they\u2019ve purchased.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Make it clear which product the rating pertains to by making sure the layout and grouping are clear when several products are on the page."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use the rating component for data that has a continuous range, such as the brightness of a photo. Instead, use a slider."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return RatingPage;
}(React.Component));
exports.RatingPage = RatingPage;
//# sourceMappingURL=RatingPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Rating")); __export(require("./Rating.Props")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| SearchBox.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| SearchBox.js | 11.49% | (10 / 87) | 16.67% | (10 / 60) | 5.56% | (1 / 18) | 12.5% | (10 / 80) | |
| SearchBox.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| SearchBoxPage.js | 30.77% | (8 / 26) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 34.78% | (8 / 23) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=SearchBox.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Icon_1 = require("../../Icon");
var styles = require("./SearchBox.scss");
var SearchBox = (function (_super) {
__extends(SearchBox, _super);
function SearchBox(props) {
var _this = _super.call(this, props) || this;
_this.state = {
value: props.value || '',
hasFocus: false,
id: Utilities_1.getId('SearchBox')
};
return _this;
}
SearchBox.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
this.setState({
value: newProps.value
});
}
};
SearchBox.prototype.render = function () {
var _a = this.props, labelText = _a.labelText, className = _a.className;
var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
return (React.createElement("div", __assign({ ref: this._resolveRef('_rootElement'), className: Utilities_1.css('ms-SearchBox', className, styles.root, (_c = {},
_c['is-active ' + styles.rootIsActive] = hasFocus,
_c['can-clear ' + styles.rootCanClear] = value.length > 0,
_c)) }, { onFocusCapture: this._onFocusCapture }),
React.createElement("div", { className: Utilities_1.css('ms-SearchBox-iconContainer', styles.iconContainer) },
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-SearchBox-icon', styles.icon), iconName: 'Search' })),
React.createElement("input", { id: id, className: Utilities_1.css('ms-SearchBox-field', styles.field), placeholder: labelText, onChange: this._onInputChange, onKeyDown: this._onKeyDown, value: value, ref: this._resolveRef('_inputElement') }),
React.createElement("div", { className: Utilities_1.css('ms-SearchBox-clearButton', styles.clearButton), onClick: this._onClearClick },
React.createElement(Icon_1.Icon, { iconName: 'Clear' }))));
var _c;
};
/**
* Sets focus to the search box input field
*/
SearchBox.prototype.focus = function () {
if (this._inputElement) {
this._inputElement.focus();
}
};
SearchBox.prototype._onClearClick = function (ev) {
this.setState({
value: ''
});
this._callOnChange('');
ev.stopPropagation();
ev.preventDefault();
this._inputElement.focus();
};
SearchBox.prototype._onFocusCapture = function (ev) {
this.setState({
hasFocus: true
});
this._events.on(Utilities_1.getDocument().body, 'focus', this._handleDocumentFocus, true);
};
SearchBox.prototype._onKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.escape:
this._onClearClick(ev);
break;
case Utilities_1.KeyCodes.enter:
if (this.props.onSearch && this.state.value.length > 0) {
this.props.onSearch(this.state.value);
}
break;
default:
return;
}
// We only get here if the keypress has been handled.
ev.preventDefault();
ev.stopPropagation();
};
SearchBox.prototype._onInputChange = function (ev) {
this.setState({
value: this._inputElement.value
});
this._callOnChange(this._inputElement.value);
};
SearchBox.prototype._handleDocumentFocus = function (ev) {
if (!Utilities_1.elementContains(this._rootElement, ev.target)) {
this._events.off(Utilities_1.getDocument().body, 'focus');
this.setState({
hasFocus: false
});
}
};
SearchBox.prototype._callOnChange = function (newValue) {
var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
// Call @deprecated method.
if (onChanged) {
onChanged(newValue);
}
if (onChange) {
onChange(newValue);
}
};
return SearchBox;
}(Utilities_1.BaseComponent));
SearchBox.defaultProps = {
labelText: 'Search',
};
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onClearClick", null);
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onFocusCapture", null);
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onKeyDown", null);
__decorate([
Utilities_1.autobind
], SearchBox.prototype, "_onInputChange", null);
exports.SearchBox = SearchBox;
//# sourceMappingURL=SearchBox.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_14897739',
iconContainer: 'iconContainer_14897739',
icon: 'icon_14897739',
field: 'field_14897739',
clearButton: 'clearButton_14897739',
label: 'label_14897739',
rootIsActive: 'rootIsActive_14897739',
rootIsDisabled: 'rootIsDisabled_14897739',
rootCanClear: 'rootCanClear_14897739',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_14897739{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-bottom:10px;padding:0 0 0 8px;border:1px solid " }, { "theme": "themeTertiary", "defaultValue": "#71afe5" }, { "rawString": ";height:32px}html[dir=rtl] .root_14897739{padding:0 8px 0 0}.iconContainer_14897739{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:16px;width:32px;text-align:center;transition:width 167ms;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.icon_14897739{opacity:1;transition:opacity 167ms 0s}.field_14897739{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:none;outline:transparent 1px solid;font-weight:inherit;font-family:inherit;font-size:inherit;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:transparent;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;text-overflow:ellipsis;padding-bottom:.5px}.field_14897739::-ms-clear{display:none}.clearButton_14897739{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none;cursor:pointer;text-align:center;font-size:12px;-ms-flex-preferred-size:32px;flex-basis:32px;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_14897739:hover .field_14897739{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.root_14897739:hover .label_14897739{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_14897739:hover .label_14897739 .iconContainer_14897739{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_14897739{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_14897739 .iconContainer_14897739{width:4px;transition:width 167ms}.rootIsActive_14897739 .icon_14897739{opacity:0;opacity:0 0s 167ms}.rootIsDisabled_14897739{border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsDisabled_14897739 .iconContainer_14897739{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_14897739 .field_14897739{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.rootCanClear_14897739 .clearButton_14897739{display:-webkit-box;display:-ms-flexbox;display:flex}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=SearchBox.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var SearchBox_Small_Example_1 = require("./examples/SearchBox.Small.Example");
var SearchBox_FullSize_Example_1 = require("./examples/SearchBox.FullSize.Example");
var SearchBoxSmallExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx');
var SearchBoxFullSizeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx');
var SearchBoxPage = (function (_super) {
__extends(SearchBoxPage, _super);
function SearchBoxPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SearchBoxPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'SearchBox', componentName: 'SearchBoxExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'SearchBox', code: SearchBoxSmallExampleCode },
React.createElement(SearchBox_Small_Example_1.SearchBoxSmallExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'SearchBox - No Parent Container', code: SearchBoxFullSizeExampleCode },
React.createElement(SearchBox_FullSize_Example_1.SearchBoxFullSizeExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/SearchBox.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app."),
React.createElement("h2", { className: 'ms-font-xl' }, "Zero input state "),
React.createElement("p", null, "When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display \"hint text\" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include \"type to search\", \"try searching for <x>\", \"search for a place\" or \"type to search in <x location>\"."),
React.createElement("h2", { className: 'ms-font-xl' }, "Autocomplete suggestions"),
React.createElement("p", null, "As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse."),
React.createElement("h2", { className: 'ms-font-xl' }, "Full search"),
React.createElement("p", null, "If a user hits \"enter\" after entering input, a full search is executed. Full searches often go to another \"results\" page, or change/filter the content of the current page to show only applicable content. The results can appear in any form that best communicates the content."),
React.createElement("p", null, "As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string."),
React.createElement("h2", { className: 'ms-font-xl' }, "Search scopes"),
React.createElement("p", null, "Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched."),
React.createElement("p", null, "Some common search scopes include:"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("strong", null, "Global:"),
" Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more."),
React.createElement("li", null,
React.createElement("strong", null, "Web:"),
" Search a web index. Results include pages, entities, and answers."),
React.createElement("li", null,
React.createElement("strong", null, "My stuff:"),
" Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).")),
React.createElement("h2", { className: 'ms-font-xl' }, "SearchBox with no parent container"),
React.createElement("p", null, "Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use placeholder text in the SearchBox to describe what users can search for."),
React.createElement("li", null, "Example: \"Search\"; \"Search files\"; \"Search site\""),
React.createElement("li", null, "Once the user has clicked into the SearchBox but hasn\u2019t entered input yet, use \"hint text\" to communicate search scope."),
React.createElement("li", null, "Examples: \"Try searching for a PDFs\"; \"Search contacts list\"; \"Type to find <content type>\""),
React.createElement("li", null, "Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user's query text."),
React.createElement("li", null, "Provide autocomplete suggestions where there are strong matches to the user's query that the user may want to view immediately."),
React.createElement("li", null, "Use a visual separator to define a group of a similar or conceptually aligned autocomplete suggestions."),
React.createElement("li", null, "If possible, provide a preview (e.g. image, title, etc.) for autocomplete suggestions to help the user quickly determine if the suggested result is what they were searching for."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't leave the SearchBox blank because it's too ambiguous."),
React.createElement("li", null, "Don't have lengthy and unclear hint text. It should be used to clarify and set expectations."),
React.createElement("li", null, "Don't provide too many autocomplete suggestions, as that will overwhelm the user."),
React.createElement("li", null, "Don't provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration."),
React.createElement("li", null, "Don\u2019t provide too much information or metadata in the suggestions list; it\u2019s intended to be lightweight."),
React.createElement("li", null, "Don\u2019t use an autocomplete dropdown for something that has one choice; there must be more than one item."),
React.createElement("li", null, "Don't build a custom search control based on the default text box or any other control."),
React.createElement("li", null, "Don't use SearchBox if you cannot reliably provide accurate results."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/SearchBox/SearchBox.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return SearchBoxPage;
}(React.Component));
exports.SearchBoxPage = SearchBoxPage;
//# sourceMappingURL=SearchBoxPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./SearchBox")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Slider.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Slider.js | 7.87% | (10 / 127) | 10.1% | (10 / 99) | 5% | (1 / 20) | 8.33% | (10 / 120) | |
| Slider.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| SliderPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Slider.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Label_1 = require("../../Label");
var styles = require("./Slider.scss");
var ValuePosition;
(function (ValuePosition) {
ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
ValuePosition[ValuePosition["Next"] = 1] = "Next";
})(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {}));
var Slider = (function (_super) {
__extends(Slider, _super);
function Slider(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'value': 'defaultValue'
});
_this._id = Utilities_1.getId('Slider');
var value = props.value || props.defaultValue || props.min;
_this.state = {
value: value,
renderedValue: value
};
return _this;
}
/**
* Invoked when a component is receiving new props. This method is not called for the initial render.
*/
Slider.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
var value = Math.max(newProps.min, Math.min(newProps.max, newProps.value));
this.setState({
value: value,
renderedValue: value
});
}
};
Slider.prototype.render = function () {
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, disabled = _a.disabled, label = _a.label, max = _a.max, min = _a.min, showValue = _a.showValue, buttonProps = _a.buttonProps;
var _b = this.state, value = _b.value, renderedValue = _b.renderedValue;
var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100;
var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown };
return (React.createElement("div", { className: Utilities_1.css('ms-Slider', styles.root, className, (_c = {},
_c['ms-Slider-enabled ' + styles.rootIsEnabled] = !disabled,
_c['ms-Slider-disabled ' + styles.rootIsDisabled] = disabled,
_c)), ref: 'root' },
label && (React.createElement(Label_1.Label, __assign({ className: styles.titleLabel }, ariaLabel ? {} : { 'htmlFor': this._id }), label)),
React.createElement("div", { className: Utilities_1.css('ms-Slider-container', styles.container) },
React.createElement("button", __assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, (_d = {
'ms-Slider-showValue': showValue
},
_d['ms-Slider-showTransitions ' + styles.showTransitions] = (renderedValue === value),
_d)), id: this._id, disabled: disabled, type: 'button', role: 'slider' }),
React.createElement("div", { ref: 'sliderLine', className: Utilities_1.css('ms-Slider-line', styles.line) },
React.createElement("span", __assign({ ref: 'thumb', className: Utilities_1.css('ms-Slider-thumb', styles.thumb) }, ariaLabel ? { 'aria-label': ariaLabel } : {}, { style: Utilities_1.getRTL() ?
{ 'right': thumbOffsetPercent + '%' } :
{ 'left': thumbOffsetPercent + '%' } })),
React.createElement("span", { className: Utilities_1.css('ms-Slider-active', styles.activeSection), style: { 'width': thumbOffsetPercent + '%' } }),
React.createElement("span", { className: Utilities_1.css('ms-Slider-inactive', styles.inactiveSection), style: { 'width': (100 - thumbOffsetPercent) + '%' } }))),
showValue && React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Slider-value', styles.valueLabel) }, value))));
var _c, _d;
};
Slider.prototype.focus = function () {
if (this.refs.thumb) {
this.refs.thumb.focus();
}
};
Object.defineProperty(Slider.prototype, "value", {
get: function () {
return this.state.value;
},
enumerable: true,
configurable: true
});
Slider.prototype._onMouseDownOrTouchStart = function (event) {
if (event.type === 'mousedown') {
this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true);
this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true);
}
else if (event.type === 'touchstart') {
this._events.on(window, 'touchmove', this._onMouseMoveOrTouchMove, true);
this._events.on(window, 'touchend', this._onMouseUpOrTouchEnd, true);
}
this._onMouseMoveOrTouchMove(event, true);
};
Slider.prototype._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
var steps = (max - min) / step;
var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect();
var sliderLength = sliderPositionRect.width;
var stepLength = sliderLength / steps;
var currentSteps;
if (event.type === 'mousedown' || event.type === 'mousemove') {
currentSteps = Utilities_1.getRTL() ?
(sliderPositionRect.right - event.clientX) / stepLength :
(event.clientX - sliderPositionRect.left) / stepLength;
}
else if (event.type === 'touchstart' || event.type === 'touchmove') {
currentSteps = Utilities_1.getRTL() ?
(sliderPositionRect.right - event.touches[0].clientX) / stepLength :
(event.touches[0].clientX - sliderPositionRect.left) / stepLength;
}
var currentValue;
var renderedValue;
// The value shouldn't be bigger than max or be smaller than min.
if (currentSteps > Math.floor(steps)) {
renderedValue = currentValue = max;
}
else if (currentSteps < 0) {
renderedValue = currentValue = min;
}
else {
renderedValue = min + step * currentSteps;
currentValue = min + step * Math.round(currentSteps);
}
this._updateValue(currentValue, renderedValue);
if (!suppressEventCancelation) {
event.preventDefault();
event.stopPropagation();
}
};
Slider.prototype._updateValue = function (value, renderedValue) {
var _this = this;
var valueChanged = value !== this.state.value;
this.setState({
value: value,
renderedValue: renderedValue
}, function () {
if (valueChanged && _this.props.onChange) {
_this.props.onChange(_this.state.value);
}
});
};
Slider.prototype._onMouseUpOrTouchEnd = function () {
// Synchronize the renderedValue to the actual value.
this.setState({
renderedValue: this.state.value
});
this._events.off();
};
Slider.prototype._onKeyDown = function (event) {
var value = this.state.value;
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
var diff = 0;
switch (event.which) {
case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left):
case Utilities_1.KeyCodes.down:
diff = -step;
break;
case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right):
case Utilities_1.KeyCodes.up:
diff = step;
break;
case Utilities_1.KeyCodes.home:
value = min;
break;
case Utilities_1.KeyCodes.end:
value = max;
break;
default:
return;
}
var newValue = Math.min(max, Math.max(min, value + diff));
this._updateValue(newValue, newValue);
event.preventDefault();
event.stopPropagation();
};
return Slider;
}(Utilities_1.BaseComponent));
Slider.defaultProps = {
step: 1,
min: 0,
max: 10,
showValue: true,
disabled: false,
buttonProps: {}
};
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseDownOrTouchStart", null);
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseMoveOrTouchMove", null);
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseUpOrTouchEnd", null);
__decorate([
Utilities_1.autobind
], Slider.prototype, "_onKeyDown", null);
exports.Slider = Slider;
//# sourceMappingURL=Slider.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_2e1a26fc',
titleLabel: 'titleLabel_2e1a26fc',
line: 'line_2e1a26fc',
activeSection: 'activeSection_2e1a26fc',
inactiveSection: 'inactiveSection_2e1a26fc',
showTransitions: 'showTransitions_2e1a26fc',
thumb: 'thumb_2e1a26fc',
slideBox: 'slideBox_2e1a26fc',
container: 'container_2e1a26fc',
valueLabel: 'valueLabel_2e1a26fc',
rootIsEnabled: 'rootIsEnabled_2e1a26fc',
rootIsDisabled: 'rootIsDisabled_2e1a26fc',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_2e1a26fc{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:8px}.titleLabel_2e1a26fc{padding:0}.line_2e1a26fc{position:relative;width:100%}.line_2e1a26fc span{height:4px;border-radius:4px}html[dir=ltr] .line_2e1a26fc span{float:left}html[dir=rtl] .line_2e1a26fc span{float:right}.activeSection_2e1a26fc{background:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.inactiveSection_2e1a26fc{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.showTransitions_2e1a26fc .thumb_2e1a26fc{transition:left 367ms cubic-bezier(.1,.9,.2,1)}.showTransitions_2e1a26fc .activeSection_2e1a26fc,.showTransitions_2e1a26fc .inactiveSection_2e1a26fc{transition:width 367ms cubic-bezier(.1,.9,.2,1)}.slideBox_2e1a26fc{background:0 0;border:none;padding:0;margin:0}.slideBox_2e1a26fc .thumb_2e1a26fc{border:2px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";display:block;width:16px;height:16px;position:absolute;top:-6px;border-radius:10px}html[dir=ltr] .slideBox_2e1a26fc .thumb_2e1a26fc{-webkit-transform:translateX(-50%);transform:translateX(-50%)}html[dir=rtl] .slideBox_2e1a26fc .thumb_2e1a26fc{-webkit-transform:translateX(50%);transform:translateX(50%)}.container_2e1a26fc{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.slideBox_2e1a26fc{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:28px;line-height:28px;padding:0 8px}.slideBox_2e1a26fc::-moz-focus-inner{border:0}.slideBox_2e1a26fc{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .slideBox_2e1a26fc:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.valueLabel_2e1a26fc{-ms-flex-negative:1;flex-shrink:1;width:30px;margin:0 8px;line-height:1}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .thumb_2e1a26fc,.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:hover .thumb_2e1a26fc{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .activeSection_2e1a26fc,.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:hover .activeSection_2e1a26fc{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .inactiveSection_2e1a26fc,.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:hover .inactiveSection_2e1a26fc{background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .thumb_2e1a26fc{border:2px solid " }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.rootIsEnabled_2e1a26fc .slideBox_2e1a26fc:active .activeSection_2e1a26fc{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.rootIsDisabled_2e1a26fc .thumb_2e1a26fc{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_2e1a26fc .activeSection_2e1a26fc{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_2e1a26fc .inactiveSection_2e1a26fc{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Slider.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Slider_Basic_Example_1 = require("./examples/Slider.Basic.Example");
var SliderBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx');
var SliderPage = (function (_super) {
__extends(SliderPage, _super);
function SliderPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SliderPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Slider', componentName: 'SliderExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Slider', code: SliderBasicExampleCode },
React.createElement(Slider_Basic_Example_1.SliderBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Slider/Slider.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),
React.createElement("p", null, "A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium\u2014not about setting the value to two or five.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Consider a Slider when changing a value."),
React.createElement("li", null, "Use a slider when you want your users to be able to set defined values (such as volume or brightness)."),
React.createElement("li", null, "Include a label indicating what value the Slider changes."),
React.createElement("li", null, "Use step points (or tick marks) if you don\u2019t want the Slider to allow arbitrary values between min and max. "),
React.createElement("li", null, "Use a Slider when the user would benefit from instant feedback on the effect of setting changes. "))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don't use a Slider when the options are not values."),
React.createElement("li", null, "Don\u2019t use a Slider for binary settings."),
React.createElement("li", null, "Don\u2019t create a continuous Slider if the range of values is large."),
React.createElement("li", null, "Don\u2019t use for a range of three values or less."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return SliderPage;
}(React.Component));
exports.SliderPage = SliderPage;
//# sourceMappingURL=SliderPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Slider")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Spinner.Props.js | 100% | (11 / 11) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (11 / 11) | |
| Spinner.js | 29.63% | (8 / 27) | 25% | (4 / 16) | 12.5% | (1 / 8) | 33.33% | (8 / 24) | |
| Spinner.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| SpinnerPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) | |
| interfaces.js | 100% | (11 / 11) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (11 / 11) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SpinnerSize;
(function (SpinnerSize) {
/**
* 12px Spinner diameter
*/
SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall";
/**
* 16px Spinner diameter
*/
SpinnerSize[SpinnerSize["small"] = 1] = "small";
/**
* 20px Spinner diameter
*/
SpinnerSize[SpinnerSize["medium"] = 2] = "medium";
/**
* 28px Spinner diameter
*/
SpinnerSize[SpinnerSize["large"] = 3] = "large";
})(SpinnerSize = exports.SpinnerSize || (exports.SpinnerSize = {}));
/**
* Deprecated at v2.0.0, use 'SpinnerSize' instead.
* @deprecated
*/
var SpinnerType;
(function (SpinnerType) {
/**
* Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.medium instead.
*/
SpinnerType[SpinnerType["normal"] = 0] = "normal";
/**
* Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.large instead.
*/
SpinnerType[SpinnerType["large"] = 1] = "large";
})(SpinnerType = exports.SpinnerType || (exports.SpinnerType = {}));
//# sourceMappingURL=Spinner.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 6 6 6 1 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Spinner_Props_1 = require("./Spinner.Props");
var styles = require("./Spinner.scss");
var Spinner = (function (_super) {
__extends(Spinner, _super);
function Spinner() {
return _super !== null && _super.apply(this, arguments) || this;
}
Spinner.prototype.render = function () {
var _a = this.props, type = _a.type, size = _a.size, label = _a.label, className = _a.className; // TODO remove deprecated type property at >= 2.0.0
return (React.createElement("div", { className: Utilities_1.css('ms-Spinner', styles.root, className) },
React.createElement("div", { className: Utilities_1.css('ms-Spinner-circle', styles.circle, (_b = {},
_b['ms-Spinner--xSmall ' + styles.circleIsXSmall] = size === Spinner_Props_1.SpinnerSize.xSmall,
_b['ms-Spinner--small ' + styles.circleIsSmall] = size === Spinner_Props_1.SpinnerSize.small,
_b['ms-Spinner--medium ' + styles.circleIsMedium] = size === Spinner_Props_1.SpinnerSize.medium,
_b['ms-Spinner--large ' + styles.circleIsLarge] = size === Spinner_Props_1.SpinnerSize.large,
_b['ms-Spinner--normal ' + styles.circleIsTypeMedium] = type === Spinner_Props_1.SpinnerType.normal,
_b['ms-Spinner--large ' + styles.circleIsTypeLarge] = type === Spinner_Props_1.SpinnerType.large // TODO remove deprecated value at >= 2.0.0
,
_b)) }),
label && (React.createElement("div", { className: Utilities_1.css('ms-Spinner-label', styles.label) }, label))));
var _b;
};
return Spinner;
}(Utilities_1.BaseComponent));
Spinner.defaultProps = {
size: Spinner_Props_1.SpinnerSize.medium
};
exports.Spinner = Spinner;
//# sourceMappingURL=Spinner.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_56265417',
circle: 'circle_56265417',
spinAnimation: 'spinAnimation_56265417',
circleIsXSmall: 'circleIsXSmall_56265417',
circleIsSmall: 'circleIsSmall_56265417',
circleIsTypeMedium: 'circleIsTypeMedium_56265417',
circleIsMedium: 'circleIsMedium_56265417',
circleIsTypeLarge: 'circleIsTypeLarge_56265417',
circleIsLarge: 'circleIsLarge_56265417',
label: 'label_56265417',
};
load_themed_styles_1.loadStyles([{ "rawString": "@-webkit-keyframes spinAnimation_56265417{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinAnimation_56265417{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.root_56265417>.circle_56265417{margin:auto;box-sizing:border-box;border-radius:50%;width:100%;height:100%;border:1.5px solid " }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": ";border-top-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";-webkit-animation:spinAnimation_56265417 1.3s infinite cubic-bezier(.53,.21,.29,.67);animation:spinAnimation_56265417 1.3s infinite cubic-bezier(.53,.21,.29,.67)}.root_56265417>.circle_56265417.circleIsXSmall_56265417{width:12px;height:12px}.root_56265417>.circle_56265417.circleIsSmall_56265417{width:16px;height:16px}.root_56265417>.circle_56265417.circleIsMedium_56265417,.root_56265417>.circle_56265417.circleIsTypeMedium_56265417{width:20px;height:20px}.root_56265417>.circle_56265417.circleIsLarge_56265417,.root_56265417>.circle_56265417.circleIsTypeLarge_56265417{width:28px;height:28px}.root_56265417>.label_56265417{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin-top:10px;text-align:center}@media screen and (-ms-high-contrast:active){.root_56265417>.circle_56265417{border-top-style:none}}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Spinner.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Spinner_Basic_Example_1 = require("./examples/Spinner.Basic.Example");
var SpinnerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx');
var SpinnerPage = (function (_super) {
__extends(SpinnerPage, _super);
function SpinnerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SpinnerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Spinner', componentName: 'SpinnerExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Various Spinner Types', code: SpinnerBasicExampleCode },
React.createElement(Spinner_Basic_Example_1.SpinnerBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Spinner/Spinner.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a Spinner when a task is not immediate."),
React.createElement("li", null, "Use one Spinner at a time."),
React.createElement("li", null, "Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating."),
React.createElement("li", null, "Use a Spinner when confirming a change has been made or a task is being processed."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use a Spinner when performing immediate tasks."),
React.createElement("li", null, "Don't show multiple Spinners at the same time."),
React.createElement("li", null, "Don't include more than a few words when paired with a Spinner."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Spinner/Spinner.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return SpinnerPage;
}(React.Component));
exports.SpinnerPage = SpinnerPage;
//# sourceMappingURL=SpinnerPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Spinner")); __export(require("./Spinner.Props")); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Deprecated at 2.0.0. Use SpinnerSize instead.
* @deprecated
*/
var SpinnerType;
(function (SpinnerType) {
SpinnerType[SpinnerType["normal"] = 0] = "normal";
SpinnerType[SpinnerType["large"] = 1] = "large";
})(SpinnerType = exports.SpinnerType || (exports.SpinnerType = {}));
var SpinnerSize;
(function (SpinnerSize) {
SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall";
SpinnerSize[SpinnerSize["small"] = 1] = "small";
SpinnerSize[SpinnerSize["medium"] = 2] = "medium";
SpinnerSize[SpinnerSize["large"] = 3] = "large";
})(SpinnerSize = exports.SpinnerSize || (exports.SpinnerSize = {}));
//# sourceMappingURL=interfaces.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| TeachingBubble.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| TeachingBubble.js | 24.32% | (9 / 37) | 36.84% | (7 / 19) | 11.11% | (1 / 9) | 27.27% | (9 / 33) | |
| TeachingBubble.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| TeachingBubbleContent.js | 17.31% | (9 / 52) | 17.95% | (7 / 39) | 11.11% | (1 / 9) | 18.75% | (9 / 48) | |
| TeachingBubblePage.js | 26.67% | (8 / 30) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 29.63% | (8 / 27) | |
| index.js | 42.86% | (3 / 7) | 0% | (0 / 2) | 0% | (0 / 1) | 60% | (3 / 5) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=TeachingBubble.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var TeachingBubbleContent_1 = require("./TeachingBubbleContent");
var Callout_1 = require("../../Callout");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var styles = require("./TeachingBubble.scss");
var TeachingBubble = (function (_super) {
__extends(TeachingBubble, _super);
// Constructor
function TeachingBubble(props) {
var _this = _super.call(this, props) || this;
_this.state = {};
return _this;
}
TeachingBubble.prototype.render = function () {
var _a = this.props, calloutProps = _a.calloutProps, targetElement = _a.targetElement;
return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-TeachingBubble', styles.root), ref: this._resolveRef('_callout'), targetElement: targetElement }, calloutProps),
React.createElement(TeachingBubbleContent_1.TeachingBubbleContent, __assign({}, this.props))));
};
return TeachingBubble;
}(Utilities_1.BaseComponent));
// Specify default props values
TeachingBubble.defaultProps = {
calloutProps: {
beakWidth: 16,
gapSpace: 0,
setInitialFocus: true,
doNotLayer: false,
directionalHint: DirectionalHint_1.DirectionalHint.rightCenter
}
};
exports.TeachingBubble = TeachingBubble;
//# sourceMappingURL=TeachingBubble.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_ad9dd9c0',
bodyContent: 'bodyContent_ad9dd9c0',
headerIsLarge: 'headerIsLarge_ad9dd9c0',
headline: 'headline_ad9dd9c0',
headerIsSmall: 'headerIsSmall_ad9dd9c0',
body: 'body_ad9dd9c0',
subText: 'subText_ad9dd9c0',
closeButton: 'closeButton_ad9dd9c0',
footer: 'footer_ad9dd9c0',
primaryButton: 'primaryButton_ad9dd9c0',
secondaryButton: 'secondaryButton_ad9dd9c0',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_ad9dd9c0{display:block;max-width:364px}.bodyContent_ad9dd9c0{padding:20px}.headerIsLarge_ad9dd9c0:not(:last-child){margin-bottom:14px}.headline_ad9dd9c0{margin:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.headerIsLarge_ad9dd9c0 .headline_ad9dd9c0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:28px;font-weight:100;font-weight:100}.headerIsSmall_ad9dd9c0 .headline_ad9dd9c0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;font-weight:600}html[dir=ltr] .headerIsSmall_ad9dd9c0 .headline_ad9dd9c0{margin-right:10px}html[dir=rtl] .headerIsSmall_ad9dd9c0 .headline_ad9dd9c0{margin-left:10px}.body_ad9dd9c0:not(:last-child){margin-bottom:20px}.subText_ad9dd9c0{margin:0;font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_ad9dd9c0 .closeButton_ad9dd9c0{position:absolute;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:12px}html[dir=ltr] .root_ad9dd9c0 .closeButton_ad9dd9c0{right:0}html[dir=rtl] .root_ad9dd9c0 .closeButton_ad9dd9c0{left:0}html[dir=ltr] .footer_ad9dd9c0 .ms-Button:not(:first-child){margin-left:20px}html[dir=rtl] .footer_ad9dd9c0 .ms-Button:not(:first-child){margin-right:20px}.root_ad9dd9c0 .ms-Callout-beak,.root_ad9dd9c0 .ms-Callout-main,.root_ad9dd9c0 .ms-Callout-smallbeak{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0 .ms-Button-label{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0:hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0:focus{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .primaryButton_ad9dd9c0:active{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0 .ms-Button-label{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0:hover{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0:focus{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ad9dd9c0 .secondaryButton_ad9dd9c0:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=TeachingBubble.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var Image_1 = require("../../Image");
var styles = require("./TeachingBubble.scss");
var TeachingBubbleContent = (function (_super) {
__extends(TeachingBubbleContent, _super);
// Constructor
function TeachingBubbleContent(props) {
var _this = _super.call(this, props) || this;
_this._id = Utilities_1.getId('TeachingBubble');
_this.state = {};
return _this;
}
TeachingBubbleContent.prototype.render = function () {
var _a = this.props, illustrationImage = _a.illustrationImage, primaryButtonProps = _a.primaryButtonProps, secondaryButtonProps = _a.secondaryButtonProps, headline = _a.headline, hasCondensedHeadline = _a.hasCondensedHeadline, hasCloseIcon = _a.hasCloseIcon, onDismiss = _a.onDismiss, closeButtonAriaLabel = _a.closeButtonAriaLabel;
var imageContent;
var headerContent;
var bodyContent;
var footerContent;
var closeButton;
if (illustrationImage && illustrationImage.src) {
imageContent = (React.createElement("div", { className: 'ms-TeachingBubble-header' },
React.createElement(Image_1.Image, __assign({}, illustrationImage))));
}
if (headline) {
headerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-header', hasCondensedHeadline ?
'ms-TeachingBubble-header--small ' + styles.headerIsSmall :
'ms-TeachingBubble-header--large ' + styles.headerIsLarge) },
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-headline', styles.headline) }, headline)));
}
if (this.props.children) {
bodyContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-body', styles.body) },
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-subText', styles.subText) }, this.props.children)));
}
if (primaryButtonProps || secondaryButtonProps) {
footerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-footer', styles.footer) },
primaryButtonProps && (React.createElement(Button_1.PrimaryButton, __assign({}, primaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }))),
secondaryButtonProps && (React.createElement(Button_1.DefaultButton, __assign({}, secondaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) })))));
}
if (hasCloseIcon) {
closeButton = (React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-TeachingBubble-closebutton', styles.closeButton), iconProps: { iconName: 'Cancel' }, title: closeButtonAriaLabel, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }));
}
return (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-content') },
imageContent,
closeButton,
React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-bodycontent', styles.bodyContent) },
headerContent,
bodyContent,
footerContent)));
};
return TeachingBubbleContent;
}(Utilities_1.BaseComponent));
// Specify default props values
TeachingBubbleContent.defaultProps = {
hasCondensedHeadline: false,
imageProps: {
imageFit: Image_1.ImageFit.cover,
width: 364,
height: 130
}
};
exports.TeachingBubbleContent = TeachingBubbleContent;
//# sourceMappingURL=TeachingBubbleContent.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var Layer_1 = require("office-ui-fabric-react/lib/Layer");
var example_app_base_1 = require("@uifabric/example-app-base");
var TeachingBubble_Basic_Example_1 = require("./examples/TeachingBubble.Basic.Example");
var TeachingBubble_Condensed_Example_1 = require("./examples/TeachingBubble.Condensed.Example");
var TeachingBubble_Illustration_Example_1 = require("./examples/TeachingBubble.Illustration.Example");
var TeachingBubbleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx');
var TeachingBubbleCondensedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx');
var TeachingBubbleIllustrationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx');
var TeachingBubblePage = (function (_super) {
__extends(TeachingBubblePage, _super);
function TeachingBubblePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TeachingBubblePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'TeachingBubble', componentName: 'TeachingBubbleExample', exampleCards: React.createElement(Layer_1.LayerHost, null,
React.createElement(example_app_base_1.ExampleCard, { title: 'TeachingBubble', code: TeachingBubbleBasicExampleCode },
React.createElement(TeachingBubble_Basic_Example_1.TeachingBubbleBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'TeachingBubble Condensed', code: TeachingBubbleCondensedExampleCode },
React.createElement(TeachingBubble_Condensed_Example_1.TeachingBubbleCondensedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'TeachingBubble with Illustration', code: TeachingBubbleIllustrationExampleCode },
React.createElement(TeachingBubble_Illustration_Example_1.TeachingBubbleIllustrationExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/components/TeachingBubble' }, "TeachingBubbles"),
React.createElement("span", null, " allow the user to display important hints on their web pages with a callout box.")) }));
};
return TeachingBubblePage;
}(React.Component));
exports.TeachingBubblePage = TeachingBubblePage;
//# sourceMappingURL=TeachingBubblePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./TeachingBubble")); __export(require("./TeachingBubbleContent")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| TextField.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| TextField.js | 5.92% | (9 / 152) | 7% | (7 / 100) | 3.03% | (1 / 33) | 6.08% | (9 / 148) | |
| TextField.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| TextFieldPage.js | 30.77% | (8 / 26) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 34.78% | (8 / 23) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=TextField.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Label_1 = require("../../Label");
var Utilities_1 = require("../../Utilities");
var styles = require("./TextField.scss");
var TextField = (function (_super) {
__extends(TextField, _super);
function TextField(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'value': 'defaultValue'
});
_this._id = Utilities_1.getId('TextField');
_this._descriptionId = Utilities_1.getId('TextFieldDescription');
_this.state = {
value: props.value || props.defaultValue || '',
isFocused: false,
errorMessage: ''
};
_this._onInputChange = _this._onInputChange.bind(_this);
_this._onFocus = _this._onFocus.bind(_this);
_this._onBlur = _this._onBlur.bind(_this);
_this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime);
_this._lastValidation = 0;
_this._isDescriptionAvailable = false;
return _this;
}
Object.defineProperty(TextField.prototype, "value", {
/**
* Gets the current value of the text field.
*/
get: function () {
return this.state.value;
},
enumerable: true,
configurable: true
});
TextField.prototype.componentDidMount = function () {
this._isMounted = true;
this._adjustInputHeight();
if (this.props.validateOnLoad) {
this._validate(this.state.value);
}
};
TextField.prototype.componentWillReceiveProps = function (newProps) {
var onBeforeChange = this.props.onBeforeChange;
if (newProps.value !== undefined && newProps.value !== this.state.value) {
if (onBeforeChange) {
onBeforeChange(newProps.value);
}
this._latestValue = newProps.value;
this.setState({
value: newProps.value,
errorMessage: ''
});
this._delayedValidate(newProps.value);
}
};
TextField.prototype.componentWillUnmount = function () {
this._isMounted = false;
};
TextField.prototype.render = function () {
var _a = this.props, className = _a.className, description = _a.description, disabled = _a.disabled, iconClass = _a.iconClass, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined;
var isFocused = this.state.isFocused;
var errorMessage = this._errorMessage;
this._isDescriptionAvailable = Boolean(description || errorMessage);
var textFieldClassName = Utilities_1.css('ms-TextField', styles.root, className, (_b = {},
_b['is-required ' + styles.rootIsRequired] = required,
_b['is-disabled ' + styles.rootIsDisabled] = disabled,
_b['is-active ' + styles.rootIsActive] = isFocused,
_b['ms-TextField--multiline ' + styles.rootIsMultiline] = multiline,
_b['ms-TextField--underlined ' + styles.rootIsUnderlined] = underlined,
_b));
return (React.createElement("div", { className: textFieldClassName },
label && React.createElement(Label_1.Label, { htmlFor: this._id }, label),
iconClass && React.createElement("i", { className: Utilities_1.css(iconClass, styles.icon) }),
multiline ? this._renderTextArea() : this._renderInput(),
this._isDescriptionAvailable &&
React.createElement("span", { id: this._descriptionId },
description && React.createElement("span", { className: Utilities_1.css('ms-TextField-description', styles.description) }, description),
errorMessage &&
React.createElement("div", { "aria-live": 'assertive' },
React.createElement(Utilities_1.DelayedRender, null,
React.createElement("p", { className: Utilities_1.css('ms-TextField-errorMessage ms-u-slideDownIn20', styles.errorMessage), "data-automation-id": 'error-message' },
React.createElement("i", { className: Utilities_1.css('ms-Icon ms-Icon--Error', styles.errorIcon), "aria-hidden": 'true' }),
errorMessage))))));
var _b;
};
/**
* Sets focus on the text field
*/
TextField.prototype.focus = function () {
if (this._textElement) {
this._textElement.focus();
}
};
/**
* Selects the text field
*/
TextField.prototype.select = function () {
if (this._textElement) {
this._textElement.select();
}
};
/**
* Sets the selection start of the text field to a specified value
*/
TextField.prototype.setSelectionStart = function (value) {
if (this._textElement) {
this._textElement.selectionStart = value;
}
};
/**
* Sets the selection end of the text field to a specified value
*/
TextField.prototype.setSelectionEnd = function (value) {
if (this._textElement) {
this._textElement.selectionEnd = value;
}
};
TextField.prototype._onFocus = function (ev) {
if (this.props.onFocus) {
this.props.onFocus(ev);
}
this.setState({ isFocused: true });
if (this.props.validateOnFocusIn) {
this._validate(this.state.value);
}
};
TextField.prototype._onBlur = function (ev) {
if (this.props.onBlur) {
this.props.onBlur(ev);
}
this.setState({ isFocused: false });
if (this.props.validateOnFocusOut) {
this._validate(this.state.value);
}
};
TextField.prototype._getTextElementClassName = function () {
var errorMessage = this._errorMessage;
var textFieldClassName;
if (this.props.multiline && !this.props.resizable) {
textFieldClassName = Utilities_1.css('ms-TextField-field ms-TextField-field--unresizable', styles.field, styles.fieldIsUnresizable);
}
else {
textFieldClassName = Utilities_1.css('ms-TextField-field', styles.field);
}
return Utilities_1.css(textFieldClassName, this.props.inputClassName, (_a = {},
_a['ms-TextField-invalid ' + styles.invalid] = !!errorMessage,
_a[styles.hasIcon] = !!this.props.iconClass,
_a));
var _a;
};
Object.defineProperty(TextField.prototype, "_errorMessage", {
get: function () {
var errorMessage = this.state.errorMessage;
if (!errorMessage) {
errorMessage = this.props.errorMessage;
}
return errorMessage;
},
enumerable: true,
configurable: true
});
TextField.prototype._renderTextArea = function () {
var textAreaProps = Utilities_1.getNativeProps(this.props, Utilities_1.textAreaProperties, ['defaultValue']);
return (React.createElement("textarea", __assign({ id: this._id }, textAreaProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, "aria-label": this.props.ariaLabel, onFocus: this._onFocus, onBlur: this._onBlur })));
};
TextField.prototype._renderInput = function () {
var inputProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultValue']);
return (React.createElement("input", __assign({ type: 'text', id: this._id }, inputProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-label": this.props.ariaLabel, "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, onFocus: this._onFocus, onBlur: this._onBlur })));
};
TextField.prototype._onInputChange = function (event) {
var _this = this;
var element = event.target;
var value = element.value;
// Avoid doing unnecessary work when the value has not changed.
if (value === this._latestValue) {
return;
}
this._latestValue = value;
this.setState({
value: value,
errorMessage: ''
}, function () {
_this._adjustInputHeight();
if (_this.props.onChanged) {
_this.props.onChanged(value);
}
});
var _a = this.props, validateOnFocusIn = _a.validateOnFocusIn, validateOnFocusOut = _a.validateOnFocusOut;
if (!(validateOnFocusIn || validateOnFocusOut)) {
this._delayedValidate(value);
}
var onBeforeChange = this.props.onBeforeChange;
onBeforeChange(value);
};
TextField.prototype._validate = function (value) {
var _this = this;
// In case of _validate called multi-times during executing validate logic with promise return.
if (this._latestValidateValue === value) {
return;
}
this._latestValidateValue = value;
var onGetErrorMessage = this.props.onGetErrorMessage;
var result = onGetErrorMessage(value || '');
if (result !== undefined) {
if (typeof result === 'string') {
this.setState({
errorMessage: result
});
this._notifyAfterValidate(value, result);
}
else {
var currentValidation_1 = ++this._lastValidation;
result.then(function (errorMessage) {
if (_this._isMounted && currentValidation_1 === _this._lastValidation) {
_this.setState({ errorMessage: errorMessage });
}
_this._notifyAfterValidate(value, errorMessage);
});
}
}
else {
this._notifyAfterValidate(value, '');
}
};
TextField.prototype._notifyAfterValidate = function (value, errorMessage) {
if (this._isMounted &&
value === this.state.value &&
this.props.onNotifyValidationResult) {
this.props.onNotifyValidationResult(errorMessage, value);
}
};
TextField.prototype._adjustInputHeight = function () {
if (this._textElement && this.props.autoAdjustHeight && this.props.multiline) {
var textField = this._textElement;
textField.style.height = '';
var scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars
textField.style.height = scrollHeight + 'px';
}
};
return TextField;
}(Utilities_1.BaseComponent));
TextField.defaultProps = {
multiline: false,
resizable: true,
autoAdjustHeight: false,
underlined: false,
onChanged: function () { },
onBeforeChange: function () { },
onNotifyValidationResult: function () { },
onGetErrorMessage: function () { return undefined; },
deferredValidationTime: 200,
errorMessage: '',
validateOnFocusIn: false,
validateOnFocusOut: false,
validateOnLoad: true,
};
exports.TextField = TextField;
//# sourceMappingURL=TextField.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_4b4ccde0',
screenReaderOnly: 'screenReaderOnly_4b4ccde0',
rootIsDisabled: 'rootIsDisabled_4b4ccde0',
rootIsRequired: 'rootIsRequired_4b4ccde0',
rootIsActive: 'rootIsActive_4b4ccde0',
errorIcon: 'errorIcon_4b4ccde0',
icon: 'icon_4b4ccde0',
field: 'field_4b4ccde0',
hasIcon: 'hasIcon_4b4ccde0',
description: 'description_4b4ccde0',
rootIsUnderlined: 'rootIsUnderlined_4b4ccde0',
rootIsMultiline: 'rootIsMultiline_4b4ccde0',
errorMessage: 'errorMessage_4b4ccde0',
invalid: 'invalid_4b4ccde0',
fieldIsUnresizable: 'fieldIsUnresizable_4b4ccde0',
hidden: 'hidden_4b4ccde0',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_4b4ccde0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;margin-bottom:8px;position:relative}.root_4b4ccde0 .ms-Label{font-size:14px;font-weight:400}.screenReaderOnly_4b4ccde0{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.root_4b4ccde0.rootIsDisabled_4b4ccde0 .field{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.root_4b4ccde0.rootIsDisabled_4b4ccde0::-webkit-input-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsDisabled_4b4ccde0::-moz-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsDisabled_4b4ccde0:-moz-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsDisabled_4b4ccde0:-ms-input-placeholder{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0 .ms-Label::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0::-webkit-input-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0::-moz-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0:-moz-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsRequired_4b4ccde0:-ms-input-placeholder::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_4b4ccde0.rootIsActive_4b4ccde0{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.errorIcon_4b4ccde0{vertical-align:middle;font-size:14px}html[dir=ltr] .errorIcon_4b4ccde0{margin-right:5px}html[dir=rtl] .errorIcon_4b4ccde0{margin-left:5px}.icon_4b4ccde0{position:absolute;bottom:8px;top:auto}html[dir=ltr] .icon_4b4ccde0{right:8px}html[dir=rtl] .icon_4b4ccde0{left:8px}.field_4b4ccde0{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-radius:0;font-weight:400;font-size:14px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:32px;padding:0 12px 1px 12px;width:100%;outline:0;text-overflow:ellipsis}html[dir=rtl] .field_4b4ccde0{padding:0 12px 1px 12px}html[dir=ltr] .field_4b4ccde0.hasIcon_4b4ccde0{padding-right:24px}html[dir=rtl] .field_4b4ccde0.hasIcon_4b4ccde0{padding-left:24px}.field_4b4ccde0:hover{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.field_4b4ccde0:focus{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_4b4ccde0:focus,.field_4b4ccde0:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_4b4ccde0:focus,.field_4b4ccde0:hover{border-color:#37006e}}.field_4b4ccde0[disabled]{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.field_4b4ccde0::-webkit-input-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0::-moz-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0:-moz-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0:-ms-input-placeholder{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.field_4b4ccde0::-ms-clear{display:none}.description_4b4ccde0{color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:11px}.root_4b4ccde0.rootIsUnderlined_4b4ccde0{border-bottom:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";display:table;width:100%}.root_4b4ccde0.rootIsUnderlined_4b4ccde0:hover{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4b4ccde0.rootIsUnderlined_4b4ccde0:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4b4ccde0.rootIsUnderlined_4b4ccde0:hover{border-color:#37006e}}.root_4b4ccde0.rootIsUnderlined_4b4ccde0:active,.root_4b4ccde0.rootIsUnderlined_4b4ccde0:focus{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{font-size:14px;display:table-cell;vertical-align:top;padding-top:9px;height:32px;width:1%;white-space:nowrap}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{margin-right:8px}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{margin-left:8px}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-left:12px}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-right:12px}.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{border:0;display:table-cell;padding-top:8px;padding-bottom:3px}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{float:left}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{float:right}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:left}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:right}.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0:active,.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0:focus,.root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0:hover{outline:0}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsDisabled_4b4ccde0{border-bottom-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsDisabled_4b4ccde0 .ms-Label{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsDisabled_4b4ccde0 .field_4b4ccde0{background-color:transparent;color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsActive_4b4ccde0{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsActive_4b4ccde0{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_4b4ccde0.rootIsUnderlined_4b4ccde0.rootIsActive_4b4ccde0{border-color:#37006e}}.root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;font-size:14px;font-weight:400;line-height:17px;min-height:60px;height:auto;padding-top:6px;overflow:auto}html[dir=ltr] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0.hasIcon_4b4ccde0{padding-right:40px}html[dir=rtl] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0.hasIcon_4b4ccde0{padding-left:40px}.errorMessage_4b4ccde0{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400;color:" }, { "theme": "redDark", "defaultValue": "#a80000" }, { "rawString": ";margin:0;padding-top:5px}.invalid_4b4ccde0,.invalid_4b4ccde0:focus,.invalid_4b4ccde0:hover{border-color:" }, { "theme": "redDark", "defaultValue": "#a80000" }, { "rawString": "}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-left:12px}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-right:12px}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-right:0}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .ms-Label{padding-left:0}html[dir=ltr] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:left}html[dir=rtl] .root_4b4ccde0.rootIsUnderlined_4b4ccde0 .field_4b4ccde0{text-align:right}html[dir=ltr] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .icon_4b4ccde0{right:24px}html[dir=rtl] .root_4b4ccde0.rootIsMultiline_4b4ccde0 .icon_4b4ccde0{left:24px}.root_4b4ccde0.rootIsMultiline_4b4ccde0 .field_4b4ccde0.fieldIsUnresizable_4b4ccde0{resize:none}.hidden_4b4ccde0{display:none}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=TextField.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var TextField_Basic_Example_1 = require("./examples/TextField.Basic.Example");
var TextField_ErrorMessage_Example_1 = require("./examples/TextField.ErrorMessage.Example");
var TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx');
var TextFieldErrorMessageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx');
var TextFieldPage = (function (_super) {
__extends(TextFieldPage, _super);
function TextFieldPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TextFieldPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'TextField', componentName: 'TextFieldExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'TextField variations', code: TextFieldBasicExampleCode },
React.createElement(TextField_Basic_Example_1.TextFieldBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'TextField error message variations', code: TextFieldErrorMessageExampleCode },
React.createElement(TextField_ErrorMessage_Example_1.TextFieldErrorMessageExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the TextField to accept data input on a form or page."),
React.createElement("li", null, "Label the TextField with a helpful name. "),
React.createElement("li", null, "Provide concise helper text that specifies what content is expected to be entered."),
React.createElement("li", null, "Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error)."),
React.createElement("li", null, "When part of a form, provide clear designations for which fields are required vs. optional."),
React.createElement("li", null, "Provide all appropriate methods for submitting provided data (onEnter or a dedicated \u2018Submit\u2019 button)."),
React.createElement("li", null, "Provide all appropriate methods of clearing provided data (\u2018X\u2019 or something similar)."),
React.createElement("li", null, "Allow for selection, copy and paste of field data."),
React.createElement("li", null, "Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc)."),
React.createElement("li", null, "When long entries are expected, provide a mechanism for overflow or expansion of the control itself."),
React.createElement("li", null, "Ensure that the TextField is functional through use of mouse/keyboard or touch when available."),
React.createElement("li", null, "Ensure that the TextField is accessible through screen reader and/or other accessibility tools."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use a TextField to render basic copy as part of a body element of a page."),
React.createElement("li", null, "Don\u2019t provide an unlabeled TextField and expect that users will know what to do with it."),
React.createElement("li", null, "Don\u2019t place a TextField inline with body copy. "),
React.createElement("li", null, "Don\u2019t be overly verbose with helper text."),
React.createElement("li", null, "Don\u2019t occlude the entry or allow entry when the active content is not visible."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/TextField/TextField.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return TextFieldPage;
}(React.Component));
exports.TextFieldPage = TextFieldPage;
//# sourceMappingURL=TextFieldPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./TextField")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| ThemePage.js | 17.65% | (9 / 51) | 26.67% | (4 / 15) | 7.69% | (1 / 13) | 18.75% | (9 / 48) | |
| ThemePage.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| defaultTheme.js | 100% | (2 / 2) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (2 / 2) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 2 2 2 1 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var example_app_base_1 = require("@uifabric/example-app-base");
var defaultTheme_1 = require("./defaultTheme");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
var DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
var Selection_1 = require("office-ui-fabric-react/lib/Selection");
var ColorPicker_1 = require("office-ui-fabric-react/lib/ColorPicker");
require("./ThemePage.scss");
var ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx');
var ThemePage = (function (_super) {
__extends(ThemePage, _super);
function ThemePage() {
var _this = _super.call(this) || this;
_this._onPickerDismiss = _this._onPickerDismiss.bind(_this);
_this.state = {
colors: Object.keys(defaultTheme_1.defaultTheme).map(function (variableName) { return ({
key: variableName,
name: variableName,
value: defaultTheme_1.defaultTheme[variableName],
description: '',
colorPickerProps: null
}); })
};
return _this;
}
ThemePage.prototype.render = function () {
var _this = this;
var _a = this.state, colors = _a.colors, colorPickerProps = _a.colorPickerProps;
return (React.createElement("div", { className: 'Themes' },
React.createElement("h1", { className: 'ms-font-xxl' }, "Themes"),
React.createElement("p", null, "The entire color pallete of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually."),
React.createElement("p", null,
"To override the themes, you need to call ",
React.createElement("span", { className: 'code' }, "loadTheme()"),
" with the appropriate set of overrides:"),
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, ThemeCodeExample),
React.createElement("h1", { className: 'ms-font-xl' }, "Define a theme"),
React.createElement("div", null,
React.createElement(DetailsList_1.DetailsList, { ref: 'list', items: colors, selectionMode: Selection_1.SelectionMode.none, layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, columns: [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 150,
maxWidth: 150
},
{
key: 'color',
name: 'Color',
fieldName: 'value',
minWidth: 200,
onRender: function (item, index) { return (React.createElement("div", { className: 'ThemePage-colorSwatch', "data-is-focusable": 'true', onClick: _this._onSwatchClicked.bind(_this, item, index) },
React.createElement("span", { className: 'ThemePage-swatch', style: { backgroundColor: item.value } }),
React.createElement("span", { className: 'ThemePage-colorValue' }, item.value))); }
},
{
key: 'desc',
name: 'Description',
fieldName: 'description',
minWidth: 90
}
] }),
colorPickerProps && (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 10, targetElement: colorPickerProps.targetElement, onDismiss: this._onPickerDismiss },
React.createElement(ColorPicker_1.ColorPicker, { color: colorPickerProps.value, onColorChanged: this._onColorChanged.bind(this, colorPickerProps.index) }))))));
};
ThemePage.prototype._onSwatchClicked = function (item, index, ev) {
this.setState({
colorPickerProps: {
targetElement: ev.currentTarget.children[0],
value: item.value,
index: index
}
});
};
ThemePage.prototype._onColorChanged = function (index, newColor) {
var colors = this.state.colors;
var color = colors[index];
var theme = {};
color.value = newColor;
for (var i = 0; i < colors.length; i++) {
var themeColor = colors[i];
theme[themeColor.key] = themeColor.value;
}
load_themed_styles_1.loadTheme(theme);
// The theme has changed values, but color state is the same. Force an update on the list.
this.refs.list.forceUpdate();
};
ThemePage.prototype._onPickerDismiss = function () {
this.setState({
colorPickerProps: null
});
};
return ThemePage;
}(React.Component));
exports.ThemePage = ThemePage;
//# sourceMappingURL=ThemePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {};
load_themed_styles_1.loadStyles([{ "rawString": ".Themes{padding:40px}.ThemePage-colorSwatch{margin:-10px 0;line-height:36px;white-space:nowrap;cursor:pointer}.ThemePage-colorSwatch::-moz-focus-inner{border:0}.ThemePage-colorSwatch{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .ThemePage-colorSwatch:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.ThemePage-colorSwatch:hover{background:rgba(0,0,0,.05)}.ThemePage-swatch{display:inline-block;width:36px;height:36px;vertical-align:middle;border:1px solid rgba(127,127,127,.5)}html[dir=ltr] .ThemePage-swatch{margin-right:5px}html[dir=rtl] .ThemePage-swatch{margin-left:5px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ThemePage.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultTheme = {
themeDarker: '#004578',
themeDark: '#005a9e',
themeDarkAlt: '#106ebe',
themePrimary: '#0078d7',
themeSecondary: '#2b88d8',
themeTertiary: '#71afe5',
themeLight: '#c7e0f4',
themeLighter: '#deecf9',
themeLighterAlt: '#eff6fc',
neutralDark: '#212121',
neutralPrimary: '#333333',
neutralSecondary: '#666666',
neutralSecondaryAlt: '#767676',
neutralTertiary: '#a6a6a6',
neutralTertiaryAlt: '#c8c8c8',
neutralQuaternary: '#d0d0d0',
neutralQuaternaryAlt: '#dadada',
neutralLight: '#eaeaea',
neutralLighter: '#f4f4f4',
neutralLighterAlt: '#f8f8f8',
alert: '#d83b01',
alertBackground: '#deecf9',
black: '#000000',
blackTranslucent40: 'rgba(0,0,0,.4)',
blue: '#0078d7',
blueDark: '#002050',
blueLight: '#00bcf2',
blueMid: '#00188f',
error: '#a80000',
errorBackground: '#fde7e9',
green: '#107c10',
greenDark: '#004b1c',
greenLight: '#bad80a',
info: '#107c10',
infoBackground: '#f4f4f4',
magenta: '#b4009e',
magentaDark: '#5c005c',
magentaLight: '#e3008c',
orange: '#d83b01',
orangeLight: '#ff8c00',
orangeLighter: '#ea4300',
purple: '#5c2d91',
purpleDark: '#32145a',
purpleLight: '#b4a0ff',
red: '#e81123',
redDark: '#a80000',
success: '#107c10',
successBackground: '#dff6dd',
teal: '#008272',
tealDark: '#004b50',
tealLight: '#00b294',
white: '#ffffff',
whiteTranslucent40: 'rgba(255,255,255,.4)',
yellow: '#ffb900',
yellowLight: '#fff100'
};
//# sourceMappingURL=defaultTheme.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Toggle.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| Toggle.js | 14.93% | (10 / 67) | 16.39% | (10 / 61) | 6.67% | (1 / 15) | 16.67% | (10 / 60) | |
| Toggle.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| TogglePage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=Toggle.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 6 6 6 1 6 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Label_1 = require("../../Label");
var styles = require("./Toggle.scss");
var Toggle = (function (_super) {
__extends(Toggle, _super);
function Toggle(props) {
var _this = _super.call(this) || this;
_this._warnMutuallyExclusive({
checked: 'defaultChecked'
});
_this.state = {
isChecked: !!(props.checked || props.defaultChecked)
};
_this._id = props.id || Utilities_1.getId('Toggle');
return _this;
}
Object.defineProperty(Toggle.prototype, "checked", {
/**
* Gets the current checked state of the toggle.
*/
get: function () {
return this.state.isChecked;
},
enumerable: true,
configurable: true
});
Toggle.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.checked !== undefined) {
this.setState({
isChecked: newProps.checked
});
}
};
Toggle.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, onAriaLabel = _a.onAriaLabel, offAriaLabel = _a.offAriaLabel, onText = _a.onText, offText = _a.offText, className = _a.className, disabled = _a.disabled;
var isChecked = this.state.isChecked;
var stateText = isChecked ? onText : offText;
var ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
var toggleNativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.buttonProperties);
return (React.createElement("div", { className: Utilities_1.css(styles.root, 'ms-Toggle', className, (_b = {
'is-checked': isChecked,
'is-enabled': !disabled,
'is-disabled': disabled
},
_b[styles.isChecked] = isChecked,
_b[styles.isEnabled] = !disabled,
_b[styles.isDisabled] = disabled,
_b)) },
React.createElement("div", { className: Utilities_1.css(styles.innerContainer, 'ms-Toggle-innerContainer') },
label && (React.createElement(Label_1.Label, { className: 'ms-Toggle-label', htmlFor: this._id }, label)),
React.createElement("div", { className: Utilities_1.css(styles.slider, 'ms-Toggle-slider') },
React.createElement("button", __assign({ ref: function (c) { return _this._toggleButton = c; }, type: 'button', id: this._id }, toggleNativeProps, { name: this._id, className: Utilities_1.css(styles.button, 'ms-Toggle-button'), disabled: disabled, "aria-pressed": isChecked, "aria-label": ariaLabel, onClick: this._onClick })),
React.createElement("div", { className: Utilities_1.css(styles.background, 'ms-Toggle-background') },
React.createElement("div", { className: Utilities_1.css(styles.focus, 'ms-Toggle-focus') }),
React.createElement("div", { className: Utilities_1.css(styles.thumb, 'ms-Toggle-thumb') })),
stateText && (React.createElement(Label_1.Label, { className: Utilities_1.css(styles.stateText, 'ms-Toggle-stateText') }, stateText))))));
var _b;
};
Toggle.prototype.focus = function () {
if (this._toggleButton) {
this._toggleButton.focus();
}
};
Toggle.prototype._onClick = function () {
var _a = this.props, checked = _a.checked, onChanged = _a.onChanged;
var isChecked = this.state.isChecked;
// Only update the state if the user hasn't provided it.
if (checked === undefined) {
this.setState({
isChecked: !isChecked
});
}
if (onChanged) {
onChanged(!isChecked);
}
};
return Toggle;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], Toggle.prototype, "_onClick", null);
exports.Toggle = Toggle;
//# sourceMappingURL=Toggle.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_e046b8da',
isEnabled: 'isEnabled_e046b8da',
button: 'button_e046b8da',
background: 'background_e046b8da',
thumb: 'thumb_e046b8da',
slider: 'slider_e046b8da',
isChecked: 'isChecked_e046b8da',
isDisabled: 'isDisabled_e046b8da',
innerContainer: 'innerContainer_e046b8da',
focus: 'focus_e046b8da',
stateText: 'stateText_e046b8da',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_e046b8da{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;display:block;margin-bottom:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.isEnabled_e046b8da .button_e046b8da{cursor:pointer}.isEnabled_e046b8da .background_e046b8da{border:1px solid " }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isEnabled_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isEnabled_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.isEnabled_e046b8da .slider_e046b8da:hover .background_e046b8da{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.isEnabled_e046b8da .slider_e046b8da:hover .thumb_e046b8da{background:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.isEnabled_e046b8da.isChecked_e046b8da .background_e046b8da{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isEnabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isEnabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=ltr] .isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{left:28px}html[dir=rtl] .isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{right:28px}@media screen and (-ms-high-contrast:active){.isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isEnabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.isEnabled_e046b8da.isChecked_e046b8da .slider_e046b8da:hover .background_e046b8da{border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:" }, { "theme": "themeSecondary", "defaultValue": "#2b88d8" }, { "rawString": "}.isEnabled_e046b8da.isChecked_e046b8da .slider_e046b8da:hover .thumb_e046b8da{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.isDisabled_e046b8da .thumb_e046b8da{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da .thumb_e046b8da{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da .thumb_e046b8da{background-color:#600000}}.isDisabled_e046b8da .background_e046b8da{border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da .background_e046b8da{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da .background_e046b8da{border-color:#600000}}.isDisabled_e046b8da.isChecked_e046b8da .background_e046b8da{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border:1px solid transparent}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da.isChecked_e046b8da .background_e046b8da{background-color:#600000}}.isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] .isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{left:28px}html[dir=rtl] .isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{right:28px}@media screen and (-ms-high-contrast:active){.isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.isDisabled_e046b8da.isChecked_e046b8da .thumb_e046b8da{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.innerContainer_e046b8da{display:inline-block;min-width:45px}.ms-Fabric.is-focusVisible .root_e046b8da.isEnabled_e046b8da .button_e046b8da:focus+.background_e046b8da .focus_e046b8da{border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.button_e046b8da{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;margin:0;padding:0}.slider_e046b8da{position:relative;min-height:20px}.background_e046b8da{display:inline-block;position:absolute;width:44px;height:20px;box-sizing:border-box;vertical-align:middle;border-radius:20px;cursor:pointer;transition:all .1s ease;pointer-events:none}.thumb_e046b8da{position:absolute;width:10px;height:10px;border-radius:10px;top:4px;background:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";transition:all .1s ease}html[dir=ltr] .thumb_e046b8da{left:4px}html[dir=rtl] .thumb_e046b8da{right:4px}.stateText_e046b8da{display:inline-block;vertical-align:top;line-height:20px;padding:0}html[dir=ltr] .stateText_e046b8da{margin-left:54px}html[dir=rtl] .stateText_e046b8da{margin-right:54px}.focus_e046b8da{position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;box-sizing:border-box;outline:transparent}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Toggle.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Toggle_Basic_Example_1 = require("./examples/Toggle.Basic.Example");
var ToggleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx');
var TogglePage = (function (_super) {
__extends(TogglePage, _super);
function TogglePage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TogglePage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Toggle', componentName: 'ToggleExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Toggle', code: ToggleBasicExampleCode },
React.createElement(Toggle_Basic_Example_1.ToggleBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use."),
React.createElement("h2", { className: 'ms-font-xl' }, "Choosing between Toggle and Checkbox"),
React.createElement("p", null, "For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips:"),
React.createElement("ul", null,
React.createElement("li", null, "Use a Toggle for binary settings when changes become effective immediately after the user changes them."),
React.createElement("li", null, "In the above example, it's clear with the Toggle that the wireless is set to \"On.\" But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on."),
React.createElement("li", null, "Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a \"Submit\", \"Next\", \"Ok\" button to apply changes, use a Checkbox."))), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use \"Show/Hide\" if the setting is \"Show images.\""))), donts: React.createElement("div", null,
React.createElement("ul", null, "Don\u2019t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding \"Apply\" button instead of a Toggle.")), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Toggle/Toggle.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return TogglePage;
}(React.Component));
exports.TogglePage = TogglePage;
//# sourceMappingURL=TogglePage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Toggle")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Tooltip.Props.js | 100% | (5 / 5) | 100% | (2 / 2) | 100% | (1 / 1) | 100% | (5 / 5) | |
| Tooltip.js | 25% | (9 / 36) | 35% | (7 / 20) | 11.11% | (1 / 9) | 28.13% | (9 / 32) | |
| Tooltip.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| TooltipHost.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| TooltipHost.js | 18.52% | (10 / 54) | 23.26% | (10 / 43) | 7.69% | (1 / 13) | 21.28% | (10 / 47) | |
| TooltipPage.js | 27.59% | (8 / 29) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 30.77% | (8 / 26) | |
| TooltipPage.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| index.js | 33.33% | (3 / 9) | 0% | (0 / 2) | 0% | (0 / 1) | 42.86% | (3 / 7) |
| 1 2 3 4 5 6 7 8 9 10 11 | 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TooltipDelay;
(function (TooltipDelay) {
TooltipDelay[TooltipDelay["zero"] = 0] = "zero";
TooltipDelay[TooltipDelay["medium"] = 1] = "medium";
})(TooltipDelay = exports.TooltipDelay || (exports.TooltipDelay = {}));
//# sourceMappingURL=Tooltip.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 6 6 6 1 6 6 6 6 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Tooltip_Props_1 = require("./Tooltip.Props");
var Callout_1 = require("../../Callout");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var styles = require("./Tooltip.scss");
var Tooltip = (function (_super) {
__extends(Tooltip, _super);
function Tooltip() {
return _super !== null && _super.apply(this, arguments) || this;
}
Tooltip.prototype.render = function () {
var _a = this.props, targetElement = _a.targetElement, content = _a.content, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id;
return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-Tooltip ms-u-fadeIn200', styles.root, (_b = {},
_b[styles.hasMediumDelay] = delay === Tooltip_Props_1.TooltipDelay.medium,
_b)), targetElement: targetElement, directionalHint: directionalHint }, calloutProps, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)),
React.createElement("div", { className: Utilities_1.css('ms-Tooltip-content') },
React.createElement("p", { className: Utilities_1.css('ms-Tooltip-subText', styles.subText), id: id, role: 'tooltip' }, content))));
var _b;
};
return Tooltip;
}(Utilities_1.BaseComponent));
// Specify default props values
Tooltip.defaultProps = {
directionalHint: DirectionalHint_1.DirectionalHint.topCenter,
delay: Tooltip_Props_1.TooltipDelay.medium,
calloutProps: {
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
setInitialFocus: true,
doNotLayer: false
}
};
exports.Tooltip = Tooltip;
//# sourceMappingURL=Tooltip.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
root: 'root_d6e95075',
hasMediumDelay: 'hasMediumDelay_d6e95075',
subText: 'subText_d6e95075',
host: 'host_d6e95075',
};
load_themed_styles_1.loadStyles([{ "rawString": ".root_d6e95075{max-width:364px;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:8px;pointer-events:none}.root_d6e95075.hasMediumDelay_d6e95075{-webkit-animation-delay:.3s;animation-delay:.3s}.subText_d6e95075{margin:0;font-size:12px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";word-break:break-all}.host_d6e95075{display:inline}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=Tooltip.scss.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=TooltipHost.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 2 2 2 1 2 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Tooltip_1 = require("./Tooltip");
var Tooltip_Props_1 = require("./Tooltip.Props");
var styles = require("./Tooltip.scss");
var TooltipHost = (function (_super) {
__extends(TooltipHost, _super);
// Constructor
function TooltipHost(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isTooltipVisible: false,
};
return _this;
}
// Render
TooltipHost.prototype.render = function () {
var _a = this.props, calloutProps = _a.calloutProps, content = _a.content, children = _a.children, directionalHint = _a.directionalHint, delay = _a.delay;
var isTooltipVisible = this.state.isTooltipVisible;
return (React.createElement("div", __assign({ className: Utilities_1.css('ms-TooltipHost', styles.host), ref: this._resolveRef('_tooltipHost') }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._onTooltipMouseLeave }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }),
children,
isTooltipVisible && (React.createElement(Tooltip_1.Tooltip, __assign({ delay: delay, content: content, targetElement: this._tooltipHost, directionalHint: directionalHint, calloutProps: Utilities_1.assign(calloutProps, { onDismiss: this._onTooltipCallOutDismiss }) }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties))))));
};
// Show Tooltip
TooltipHost.prototype._onTooltipMouseEnter = function (ev) {
this.setState({
isTooltipVisible: true
});
};
// Hide Tooltip
TooltipHost.prototype._onTooltipMouseLeave = function (ev) {
this.setState({
isTooltipVisible: false
});
};
// Hide Tooltip
TooltipHost.prototype._onTooltipCallOutDismiss = function () {
this.setState({
isTooltipVisible: false
});
};
return TooltipHost;
}(Utilities_1.BaseComponent));
TooltipHost.defaultProps = {
delay: Tooltip_Props_1.TooltipDelay.medium
};
__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipMouseEnter", null);
__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipMouseLeave", null);
__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipCallOutDismiss", null);
exports.TooltipHost = TooltipHost;
//# sourceMappingURL=TooltipHost.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var Layer_1 = require("office-ui-fabric-react/lib/Layer");
var example_app_base_1 = require("@uifabric/example-app-base");
var Tooltip_Bottom_Example_1 = require("./examples/Tooltip.Bottom.Example");
var Tooltip_Basic_Example_1 = require("./examples/Tooltip.Basic.Example");
require("./TooltipPage.scss");
var TooltipBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx');
var TooltipBottomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Bottom.Example.tsx');
var TooltipPage = (function (_super) {
__extends(TooltipPage, _super);
function TooltipPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TooltipPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Tooltip', componentName: 'TooltipExample', exampleCards: React.createElement(Layer_1.LayerHost, null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Tooltip with custom gapSpace', code: TooltipBasicExampleCode },
React.createElement(Tooltip_Basic_Example_1.TooltipBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Tooltip Bottom Direction. No delay', code: TooltipBottomExampleCode },
React.createElement(Tooltip_Bottom_Example_1.TooltipBottomExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/components/Tooltip' }, "Tooltips"),
React.createElement("span", null, " supplement content associated with a specific UI component.")) }));
};
return TooltipPage;
}(React.Component));
exports.TooltipPage = TooltipPage;
//# sourceMappingURL=TooltipPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {};
load_themed_styles_1.loadStyles([{ "rawString": ".ms-TooltipExample{margin-top:30px;text-align:center}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=TooltipPage.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Tooltip")); __export(require("./Tooltip.Props")); __export(require("./TooltipHost")); __export(require("../../common/DirectionalHint")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BasePicker.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| BasePicker.js | 4.51% | (11 / 244) | 7.52% | (10 / 133) | 1.89% | (1 / 53) | 4.8% | (11 / 229) | |
| BasePicker.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| PickerItem.Props.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) | |
| PickersPage.js | 29.63% | (8 / 27) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 33.33% | (8 / 24) | |
| index.js | 25% | (3 / 12) | 0% | (0 / 2) | 0% | (0 / 1) | 30% | (3 / 10) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=BasePicker.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 | 2 2 2 1 2 2 2 2 2 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var Callout_1 = require("../../Callout");
var index_1 = require("../../utilities/selection/index");
var Suggestions_1 = require("./Suggestions/Suggestions");
var SuggestionsController_1 = require("./Suggestions/SuggestionsController");
var BaseAutoFill_1 = require("./AutoFill/BaseAutoFill");
var styles = require("./BasePicker.scss");
var BasePicker = (function (_super) {
__extends(BasePicker, _super);
function BasePicker(basePickerProps) {
var _this = _super.call(this, basePickerProps) || this;
_this.SuggestionOfProperType = Suggestions_1.Suggestions;
var items = basePickerProps.defaultSelectedItems || [];
_this.suggestionStore = new SuggestionsController_1.SuggestionsController();
_this.selection = new index_1.Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
_this.selection.setItems(items);
_this.state = {
items: items,
suggestedDisplayValue: '',
moreSuggestionsAvailable: false
};
return _this;
}
Object.defineProperty(BasePicker.prototype, "items", {
get: function () {
return this.state.items;
},
enumerable: true,
configurable: true
});
BasePicker.prototype.componentWillUpdate = function (newProps, newState) {
if (newState.items && newState.items !== this.state.items) {
this.selection.setItems(newState.items);
}
};
BasePicker.prototype.componentDidMount = function () {
this.selection.setItems(this.state.items);
};
BasePicker.prototype.focus = function () {
this.focusZone.focus();
};
BasePicker.prototype.dismissSuggestions = function () {
this.setState({ suggestionsVisible: false });
};
BasePicker.prototype.completeSuggestion = function () {
if (this.suggestionStore.hasSelectedSuggestion()) {
this.addItem(this.suggestionStore.currentSuggestion.item);
this.updateValue('');
this.input.clear();
}
};
BasePicker.prototype.render = function () {
var suggestedDisplayValue = this.state.suggestedDisplayValue;
var _a = this.props, className = _a.className, inputProps = _a.inputProps;
return (React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
this.renderItems(),
React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox' }))))),
this.renderSuggestions()));
};
BasePicker.prototype.renderSuggestions = function () {
var TypedSuggestion = this.SuggestionOfProperType;
return this.state.suggestionsVisible ? (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 0, targetElement: this.input.inputElement, onDismiss: this.dismissSuggestions, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge },
React.createElement(TypedSuggestion, __assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, suggestions: this.suggestionStore.getSuggestions(), ref: this._resolveRef('suggestionElement'), onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading }, this.props.pickerSuggestionsProps)))) : (null);
};
BasePicker.prototype.renderItems = function () {
var _this = this;
var onRenderItem = this.props.onRenderItem;
var items = this.state.items;
return items.map(function (item, index) { return onRenderItem({
item: item,
index: index,
key: index + _this._getTextFromItem(item),
selected: _this.selection.isIndexSelected(index),
onRemoveItem: function () { return _this.removeItem(item); },
onItemChange: _this.onItemChange
}); });
};
BasePicker.prototype.resetFocus = function (index) {
var items = this.state.items;
if (items.length) {
var newEl = this.root.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)];
if (newEl) {
this.focusZone.focusElement(newEl);
}
}
else {
this.input.focus();
}
};
BasePicker.prototype.onSuggestionSelect = function () {
if (this.suggestionStore.currentSuggestion) {
var currentValue = this.input.value;
var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
this.setState({ suggestedDisplayValue: itemValue });
}
};
BasePicker.prototype.onSelectionChange = function () {
this.forceUpdate();
};
BasePicker.prototype.updateSuggestions = function (suggestions) {
this.suggestionStore.updateSuggestions(suggestions);
this.forceUpdate();
};
BasePicker.prototype.updateValue = function (updatedValue) {
var _this = this;
var suggestions = this.props.onResolveSuggestions(updatedValue, this.state.items);
var suggestionsArray = suggestions;
var suggestionsPromiseLike = suggestions;
// Check to see if the returned value is an array, if it is then just pass it into the next function.
// If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
if (Array.isArray(suggestionsArray)) {
this.resolveNewValue(updatedValue, suggestionsArray);
}
else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {
if (!this.loadingTimer) {
this.loadingTimer = this._async.setTimeout(function () { return _this.setState({
suggestionsLoading: true
}); }, 500);
}
this.setState({
suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
});
// Ensure that the promise will only use the callback if it was the most recent one.
var promise_1 = this.currentPromise = suggestionsPromiseLike;
promise_1.then(function (newSuggestions) {
if (promise_1 === _this.currentPromise) {
_this.resolveNewValue(updatedValue, newSuggestions);
if (_this.loadingTimer) {
_this._async.clearTimeout(_this.loadingTimer);
_this.loadingTimer = undefined;
}
}
});
}
};
BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) {
this.suggestionStore.updateSuggestions(suggestions);
var itemValue = undefined;
if (this.suggestionStore.currentSuggestion) {
itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);
}
this.setState({
suggestionsLoading: false,
suggestedDisplayValue: itemValue,
suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
});
};
BasePicker.prototype.onChange = function () {
if (this.props.onChange) {
this.props.onChange(this.state.items);
}
};
BasePicker.prototype.onInputChange = function (value) {
this.updateValue(value);
this.setState({ moreSuggestionsAvailable: true });
};
BasePicker.prototype.onSuggestionClick = function (ev, item, index) {
this.addItemByIndex(index);
};
BasePicker.prototype.onInputFocus = function (ev) {
this.selection.setAllSelected(false);
if (this.input.value) {
this.setState({ suggestionsVisible: true });
}
};
BasePicker.prototype.onKeyDown = function (ev) {
var value = this.input.value;
switch (ev.which) {
case Utilities_1.KeyCodes.escape:
if (this.state.suggestionsVisible) {
this.dismissSuggestions();
ev.preventDefault();
ev.stopPropagation();
}
break;
case Utilities_1.KeyCodes.tab:
case Utilities_1.KeyCodes.enter:
if (!ev.shiftKey && value && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
this.completeSuggestion();
ev.preventDefault();
ev.stopPropagation();
}
break;
case Utilities_1.KeyCodes.backspace:
this.onBackspace(ev);
break;
case Utilities_1.KeyCodes.up:
if (ev.target === this.input.inputElement && this.suggestionStore.previousSuggestion() && this.state.suggestionsVisible) {
ev.preventDefault();
ev.stopPropagation();
this.onSuggestionSelect();
}
break;
case Utilities_1.KeyCodes.down:
if (ev.target === this.input.inputElement && this.state.suggestionsVisible) {
if (this.suggestionStore.nextSuggestion()) {
ev.preventDefault();
ev.stopPropagation();
this.onSuggestionSelect();
}
}
break;
}
};
BasePicker.prototype.onItemChange = function (changedItem, index) {
var _this = this;
var items = this.state.items;
if (index >= 0) {
var newItems = items;
newItems[index] = changedItem;
this.setState({ items: newItems }, function () { return _this.onChange(); });
}
};
BasePicker.prototype.onGetMoreResults = function () {
var _this = this;
if (this.props.onGetMoreResults) {
var suggestions = this.props.onGetMoreResults(this.input.value, this.state.items);
var suggestionsArray = suggestions;
var suggestionsPromiseLike = suggestions;
if (Array.isArray(suggestionsArray)) {
this.updateSuggestions(suggestionsArray);
}
else if (suggestionsPromiseLike.then) {
suggestionsPromiseLike.then(function (newSuggestions) { return _this.updateSuggestions(newSuggestions); });
}
}
this.input.focus();
this.setState({ moreSuggestionsAvailable: false });
};
BasePicker.prototype.addItemByIndex = function (index) {
this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item);
this.input.clear();
this.updateValue('');
};
BasePicker.prototype.addItem = function (item) {
var _this = this;
var newItems = this.state.items.concat([item]);
this.setState({ items: newItems }, function () { return _this.onChange(); });
};
BasePicker.prototype.removeItem = function (item) {
var _this = this;
var items = this.state.items;
var index = items.indexOf(item);
if (index >= 0) {
var newItems = items.slice(0, index).concat(items.slice(index + 1));
this.setState({ items: newItems }, function () { return _this.onChange(); });
}
};
BasePicker.prototype.removeItems = function (itemsToRemove) {
var _this = this;
var items = this.state.items;
var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; });
var firstItemToRemove = this.selection.getSelection()[0];
var index = items.indexOf(firstItemToRemove);
this.setState({ items: newItems }, function () {
_this.resetFocus(index);
_this.onChange();
});
};
// This is protected because we may expect the backspace key to work differently in a different kind of picker.
// This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
BasePicker.prototype.onBackspace = function (ev) {
if (this.state.items.length && !this.input.isValueSelected && this.input.cursorLocation === 0) {
if (this.selection.getSelectedCount() > 0) {
this.removeItems(this.selection.getSelection());
}
else {
this.removeItem(this.state.items[this.state.items.length - 1]);
}
}
};
BasePicker.prototype._getTextFromItem = function (item, currentValue) {
if (this.props.getTextFromItem) {
return this.props.getTextFromItem(item, currentValue);
}
else {
return '';
}
};
return BasePicker;
}(Utilities_1.BaseComponent));
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "dismissSuggestions", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onInputChange", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onSuggestionClick", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onInputFocus", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onKeyDown", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onItemChange", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "onGetMoreResults", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "addItemByIndex", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "addItem", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "removeItem", null);
__decorate([
Utilities_1.autobind
], BasePicker.prototype, "removeItems", null);
exports.BasePicker = BasePicker;
var BasePickerListBelow = (function (_super) {
__extends(BasePickerListBelow, _super);
function BasePickerListBelow() {
return _super !== null && _super.apply(this, arguments) || this;
}
BasePickerListBelow.prototype.render = function () {
var suggestedDisplayValue = this.state.suggestedDisplayValue;
var _a = this.props, className = _a.className, inputProps = _a.inputProps;
return (React.createElement("div", null,
React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox' }))))),
this.renderSuggestions(),
React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), className: 'ms-BasePicker-selectedItems', isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke }, this.renderItems())));
};
BasePickerListBelow.prototype.onBackspace = function (ev) {
// override the existing backspace method to not do anything because the list items appear below.
};
BasePickerListBelow.prototype._isFocusZoneInnerKeystroke = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.down:
return true;
}
return false;
};
return BasePickerListBelow;
}(BasePicker));
__decorate([
Utilities_1.autobind
], BasePickerListBelow.prototype, "_isFocusZoneInnerKeystroke", null);
exports.BasePickerListBelow = BasePickerListBelow;
//# sourceMappingURL=BasePicker.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {
pickerText: 'pickerText_3ad6bbe2',
inputFocused: 'inputFocused_3ad6bbe2',
pickerInput: 'pickerInput_3ad6bbe2',
};
load_themed_styles_1.loadStyles([{ "rawString": ".pickerText_3ad6bbe2{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;box-sizing:border-box;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";min-width:180px;padding:1px;min-height:32px}.pickerText_3ad6bbe2:hover{border-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.pickerText_3ad6bbe2.inputFocused_3ad6bbe2{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.pickerInput_3ad6bbe2{height:26px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;margin:1px}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=BasePicker.scss.js.map
|
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=PickerItem.Props.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var example_app_base_1 = require("@uifabric/example-app-base");
var Picker_CustomResult_Example_1 = require("./examples/Picker.CustomResult.Example");
var TagPicker_Basic_Example_1 = require("./examples/TagPicker.Basic.Example");
var TagPickerExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx');
var PickerCustomResultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx');
var PickersPage = (function (_super) {
__extends(PickersPage, _super);
function PickersPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PickersPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Pickers', componentName: 'PickersExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Tag Picker', code: TagPickerExampleCode },
React.createElement(TagPicker_Basic_Example_1.TagPickerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Custom Picker (Document Picker)', code: PickerCustomResultExampleCode },
React.createElement(Picker_CustomResult_Example_1.PickerCustomResultExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/pickers/BasePicker.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement(Link_1.Link, { target: '_blank', href: 'http://dev.office.com/fabric/components/Pickers' }, " Pickers "),
React.createElement("span", null, " are used to pick recipients.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return PickersPage;
}(React.Component));
exports.PickersPage = PickersPage;
//# sourceMappingURL=PickersPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./Suggestions/Suggestions")); __export(require("./Suggestions/SuggestionsController")); __export(require("./AutoFill/BaseAutoFill")); __export(require("./BasePicker")); __export(require("./PeoplePicker/PeoplePicker")); __export(require("./TagPicker/TagPicker")); __export(require("./TagPicker/TagItem")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Suggestions.js | 15.15% | (10 / 66) | 14.58% | (7 / 48) | 5% | (1 / 20) | 16.13% | (10 / 62) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 4 4 4 1 4 4 4 4 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../../Utilities");
var Button_1 = require("../../../Button");
var Spinner_1 = require("../../../Spinner");
var styles = require("./Suggestions.scss");
var SuggestionsItem = (function (_super) {
__extends(SuggestionsItem, _super);
function SuggestionsItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
SuggestionsItem.prototype.render = function () {
var _a = this.props, suggestionModel = _a.suggestionModel, RenderSuggestion = _a.RenderSuggestion, onClick = _a.onClick, className = _a.className;
return (React.createElement(Button_1.CommandButton, { onClick: onClick, className: Utilities_1.css('ms-Suggestions-item', styles.suggestionsItem, (_b = {},
_b['is-suggested ' + styles.suggestionsItemIsSuggested] = suggestionModel.selected,
_b), className) },
React.createElement(RenderSuggestion, __assign({}, suggestionModel.item))));
var _b;
};
return SuggestionsItem;
}(Utilities_1.BaseComponent));
exports.SuggestionsItem = SuggestionsItem;
var Suggestions = (function (_super) {
__extends(Suggestions, _super);
function Suggestions(suggestionsProps) {
var _this = _super.call(this, suggestionsProps) || this;
_this.SuggestionsItemOfProperType = SuggestionsItem;
_this._getMoreResults = _this._getMoreResults.bind(_this);
return _this;
}
Suggestions.prototype.componentDidUpdate = function () {
this.scrollSelected();
};
Suggestions.prototype.render = function () {
var _a = this.props, suggestionsHeaderText = _a.suggestionsHeaderText, searchForMoreText = _a.searchForMoreText, className = _a.className, moreSuggestionsAvailable = _a.moreSuggestionsAvailable, noResultsFoundText = _a.noResultsFoundText, suggestions = _a.suggestions, isLoading = _a.isLoading, loadingText = _a.loadingText, onRenderNoResultFound = _a.onRenderNoResultFound;
var noResults = function () {
return noResultsFoundText ?
React.createElement("div", { className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, noResultsFoundText) : null;
};
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions', className ? className : '', styles.root) },
suggestionsHeaderText ?
(React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, suggestionsHeaderText)) : (null),
isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })),
(!suggestions || !suggestions.length) && !isLoading ?
(onRenderNoResultFound ? onRenderNoResultFound(null, noResults) : noResults()) :
this._renderSuggestions(),
searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._resolveRef('_searchForMoreButton'), className: Utilities_1.css('ms-SearchMore-button', styles.searchMoreButton), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults.bind(this) }, searchForMoreText))));
};
Suggestions.prototype.focusSearchForMoreButton = function () {
if (this._searchForMoreButton) {
this._searchForMoreButton.focus();
}
};
// TODO get the element to scroll into view properly regardless of direction.
Suggestions.prototype.scrollSelected = function () {
if (this._selectedElement) {
this._selectedElement.scrollIntoView(false);
}
};
Suggestions.prototype._renderSuggestions = function () {
var _this = this;
var _a = this.props, suggestions = _a.suggestions, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName;
var TypedSuggestionsItem = this.SuggestionsItemOfProperType;
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-container', styles.suggestionsContainer), id: 'suggestion-list', role: 'menu' }, suggestions.map(function (suggestion, index) {
return React.createElement("div", { ref: _this._resolveRef(suggestion.selected ? '_selectedElement' : ''), key: index, id: 'sug-' + index, role: 'menuitem' },
React.createElement(TypedSuggestionsItem, { suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: function (ev) { return _this.props.onSuggestionClick(ev, suggestion.item, index); }, className: suggestionsItemClassName }));
})));
};
Suggestions.prototype._getMoreResults = function () {
if (this.props.onGetMoreResults) {
this.props.onGetMoreResults();
}
};
return Suggestions;
}(Utilities_1.BaseComponent));
exports.Suggestions = Suggestions;
//# sourceMappingURL=Suggestions.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| AppDefinition.js | 6.78% | (4 / 59) | 50% | (3 / 6) | 0% | (0 / 47) | 7.02% | (4 / 57) | |
| ColorStyles.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| GettingStartedPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| GettingStartedPage.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) | |
| index.js | 20.45% | (9 / 44) | 0% | (0 / 16) | 0% | (0 / 9) | 20.93% | (9 / 43) | |
| index.scss.js | 75% | (3 / 4) | 100% | (0 / 0) | 100% | (0 / 0) | 75% | (3 / 4) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 | 4 4 4 4 | "use strict"; var __assign = (this && this.__assign) || Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = require("react"); var example_app_base_1 = require("@uifabric/example-app-base"); var DetailsList_Basic_Example_1 = require("../components/DetailsList/examples/DetailsList.Basic.Example"); exports.AppDefinition = { appTitle: 'Fabric - React', testPages: [ { component: DetailsList_Basic_Example_1.DetailsListBasicExample, key: 'DetailsListBasicExample', name: 'DetailsListBasicExample', url: '#/tests/detailslistbasicexample' } ], examplePages: [ { links: [ { getComponent: function (cb) { return cb(require('../components/Breadcrumb/BreadcrumbPage').BreadcrumbPage); }, key: 'Breadcrumb', name: 'Breadcrumb', url: '#/examples/breadcrumb' }, { getComponent: function (cb) { return cb(require('../components/Button/ButtonPage').ButtonPage); }, key: 'Button', name: 'Button', url: '#/examples/button' }, { getComponent: function (cb) { return cb(require('../components/Calendar/CalendarPage').CalendarPage); }, key: 'Calendar', name: 'Calendar', url: '#/examples/calendar' }, { getComponent: function (cb) { return cb(require('../components/Callout/CalloutPage').CalloutPage); }, key: 'Callout', name: 'Callout', url: '#/examples/callout' }, { getComponent: function (cb) { return cb(require('../components/Checkbox/CheckboxPage').CheckboxPage); }, key: 'Checkbox', name: 'Checkbox', url: '#/examples/checkbox' }, { getComponent: function (cb) { return cb(require('../components/ChoiceGroup/ChoiceGroupPage').ChoiceGroupPage); }, key: 'ChoiceGroup', name: 'ChoiceGroup', url: '#/examples/choicegroup' }, { getComponent: function (cb) { return cb(require('../components/CommandBar/CommandBarPage').CommandBarPage); }, key: 'CommandBar', name: 'CommandBar', url: '#/examples/commandbar' }, { getComponent: function (cb) { return cb(require('../components/ContextualMenu/ContextualMenuPage').ContextualMenuPage); }, key: 'ContextualMenu', name: 'ContextualMenu', url: '#/examples/contextmenu' }, { getComponent: function (cb) { return cb(require('../components/DatePicker/DatePickerPage').DatePickerPage); }, key: 'DatePicker', name: 'DatePicker', url: '#/examples/datepicker' }, { getComponent: function (cb) { return cb(require('../components/DetailsList/DetailsListPage').DetailsListPage); }, key: 'DetailsList', name: 'DetailsList', url: '#/examples/detailslist' }, { getComponent: function (cb) { return cb(require('../components/Dialog/DialogPage').DialogPage); }, key: 'Dialog', name: 'Dialog', url: '#/examples/dialog' }, { getComponent: function (cb) { return cb(require('../components/DocumentCard/DocumentCardPage').DocumentCardPage); }, key: 'DocumentCard', name: 'DocumentCard', url: '#/examples/documentcard' }, { getComponent: function (cb) { return cb(require('../components/Dropdown/DropdownPage').DropdownPage); }, key: 'Dropdown', name: 'Dropdown', url: '#/examples/dropdown' }, { getComponent: function (cb) { return cb(require('../components/Facepile/FacepilePage').FacepilePage); }, key: 'Facepile', name: 'Facepile', url: '#/examples/facepile' }, { getComponent: function (cb) { return cb(require('../components/Icon/IconPage').IconPage); }, key: 'Icon', name: 'Icon', url: '#/examples/icon' }, { getComponent: function (cb) { return cb(require('../components/Label/LabelPage').LabelPage); }, key: 'Label', name: 'Label', url: '#/examples/label' }, { getComponent: function (cb) { return cb(require('../components/Link/LinkPage').LinkPage); }, key: 'Link', name: 'Link', url: '#/examples/link' }, { getComponent: function (cb) { return cb(require('../components/List/ListPage').ListPage); }, key: 'List', name: 'List', url: '#/examples/list' }, { getComponent: function (cb) { return cb(require('../components/MessageBar/MessageBarPage').MessageBarPage); }, key: 'MessageBar', name: 'MessageBar', url: '#/examples/messagebar' }, { getComponent: function (cb) { return cb(require('../components/Modal/ModalPage').ModalPage); }, key: 'Modal', name: 'Modal', url: '#/examples/modal' }, { getComponent: function (cb) { return cb(require('../components/Overlay/OverlayPage').OverlayPage); }, key: 'Overlay', name: 'Overlay', url: '#/examples/overlay' }, { getComponent: function (cb) { return cb(require('../components/Panel/PanelPage').PanelPage); }, key: 'Panel', name: 'Panel', url: '#/examples/panel' }, { getComponent: function (cb) { return cb(require('../components/pickers/PickersPage').PickersPage); }, key: 'Pickers', name: 'Pickers', url: '#/examples/pickers' }, { getComponent: function (cb) { return cb(require('../components/pickers/PeoplePicker/PeoplePickerPage').PeoplePickerPage); }, key: 'PeoplePicker', name: 'PeoplePicker', url: '#/examples/PeoplePicker' }, { getComponent: function (cb) { return cb(require('../components/Persona/PersonaPage').PersonaPage); }, key: 'Persona', name: 'Persona', url: '#/examples/persona' }, { getComponent: function (cb) { return cb(require('../components/Pivot/PivotPage').PivotPage); }, key: 'Pivot', name: 'Pivot', url: '#/examples/pivot' }, { getComponent: function (cb) { return cb(require('../components/ProgressIndicator/ProgressIndicatorPage').ProgressIndicatorPage); }, key: 'ProgressIndicator', name: 'ProgressIndicator', url: '#/examples/progressindicator' }, { getComponent: function (cb) { return cb(require('../components/Rating/RatingPage').RatingPage); }, key: 'Rating', name: 'Rating', url: '#/examples/rating' }, { getComponent: function (cb) { return cb(require('../components/SearchBox/SearchBoxPage').SearchBoxPage); }, key: 'SearchBox', name: 'SearchBox', url: '#/examples/searchbox' }, { getComponent: function (cb) { return cb(require('../components/Spinner/SpinnerPage').SpinnerPage); }, key: 'Spinner', name: 'Spinner', url: '#/examples/spinner' }, { getComponent: function (cb) { return cb(require('../components/TeachingBubble/TeachingBubblePage').TeachingBubblePage); }, key: 'TeachingBubble', name: 'TeachingBubble', url: '#/examples/teachingbubble' }, { getComponent: function (cb) { return cb(require('../components/TextField/TextFieldPage').TextFieldPage); }, key: 'TextField', name: 'TextField', url: '#/examples/textfield' }, { getComponent: function (cb) { return cb(require('../components/Toggle/TogglePage').TogglePage); }, key: 'Toggle', name: 'Toggle', url: '#/examples/toggle' }, { getComponent: function (cb) { return cb(require('../components/Tooltip/TooltipPage').TooltipPage); }, key: 'Tooltip', name: 'Tooltip', url: '#/examples/Tooltip' } ], name: 'Basic components' }, { links: [ { getComponent: function (cb) { return cb(require('../components/ColorPicker/ColorPickerPage').ColorPickerPage); }, key: 'ColorPicker', name: 'ColorPicker', url: '#/examples/colorpicker' }, { getComponent: function (cb) { return cb(require('../components/GroupedList/GroupedListPage').GroupedListPage); }, key: 'GroupedList', name: 'GroupedList', url: '#examples/groupedlist' }, { getComponent: function (cb) { return cb(require('../components/Image/ImagePage').ImagePage); }, key: 'Image', name: 'Image', url: '#/examples/image' }, { getComponent: function (cb) { return cb(require('../components/Layer/LayerPage').LayerPage); }, key: 'Layer', name: 'Layer', url: '#/examples/layer' }, { getComponent: function (cb) { return cb(require('../components/Nav/NavPage').NavPage); }, key: 'Nav', name: 'Nav', url: '#/examples/nav' }, { getComponent: function (cb) { return cb(require('../components/Slider/SliderPage').SliderPage); }, key: 'Slider', name: 'Slider', url: '#/examples/slider' } ], name: 'Extended components' }, { links: [ { getComponent: function (cb) { return cb(require('../components/FocusTrapZone/FocusTrapZonePage').FocusTrapZonePage); }, key: 'FocusTrapZone', name: 'FocusTrapZone', url: '#examples/focustrapzone' }, { getComponent: function (cb) { return cb(require('../components/FocusZone/FocusZonePage').FocusZonePage); }, key: 'FocusZone', name: 'FocusZone', url: '#examples/focuszone' }, { getComponent: function (cb) { return cb(require('../components/MarqueeSelection/MarqueeSelectionPage').MarqueeSelectionPage); }, key: 'MarqueeSelection', name: 'MarqueeSelection', url: '#examples/marqueeselection' }, { getComponent: function (cb) { return cb(require('../utilities/selection/SelectionPage').SelectionPage); }, key: 'Selection', name: 'Selection', url: '#examples/selection' }, { getComponent: function (cb) { return cb(require('../components/Theme/ThemePage').ThemePage); }, key: 'Theme', name: 'Themes', url: '#examples/themes' } ], name: 'Utilities' } ], headerLinks: [ { name: 'Getting started', url: '#/' }, { name: 'Fabric', url: 'http://dev.office.com/fabric' }, { name: 'Github', url: 'http://www.github.com/officedev' } ] }; exports.App = function (props) { return React.createElement(example_app_base_1.App, __assign({ appDefinition: exports.AppDefinition }, props)); }; //# sourceMappingURL=AppDefinition.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {};
load_themed_styles_1.loadStyles([{ "rawString": ".hljs{background:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.hljs-comment,.hljs-quote{color:#777}.hljs-built_in,.hljs-builtin-name,.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-regexp,.hljs-symbol,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ab875d}.hljs-attribute,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-title,.hljs-type{color:#9b869b}.hljs-addition,.hljs-keyword,.hljs-selector-tag,.hljs-string{color:#8f9c6c}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=ColorStyles.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Link_1 = require("office-ui-fabric-react/lib/Link");
require("./GettingStartedPage.scss");
var example_app_base_1 = require("@uifabric/example-app-base");
var GettingStartedPage = (function (_super) {
__extends(GettingStartedPage, _super);
function GettingStartedPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
GettingStartedPage.prototype.render = function () {
return (React.createElement("div", { className: 'ms-GettingStartedPage' },
React.createElement("div", { className: 'ms-GettingStartedPage-banner' },
React.createElement("h1", null, "office-ui-fabric-react"),
React.createElement("h3", null, "A library of reusable, generic React components")),
React.createElement("h2", null, "Overview"),
React.createElement("p", null, "Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over."),
React.createElement("p", null, "Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need."),
React.createElement("h2", null, "Getting started"),
React.createElement("p", null, "Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as ",
React.createElement(Link_1.Link, { href: 'https://webpack.github.io/', target: '_blank' }, "Webpack"), " which can resolve NPM package imports in your code and can bundle the specific things you import."),
React.createElement("p", null, "Within an npm project, you should install the package and save it as a dependency:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'bash' }, "npm install --save office-ui-fabric-react")),
React.createElement("p", null, "This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react."),
React.createElement("p", null, "The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { DefaultButton } from 'office-ui-fabric-react/lib/Button';\n\nconst MyPage = () => (<div><DefaultButton>I am a button.</DefaultButton></div>);\n\nReactDOM.render(<MyPage />, document.body.firstChild);")),
React.createElement("h2", null, "Notes on module vs path-based imports"),
React.createElement("p", null, "While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, "import { Button } from 'office-ui-fabric-react';")),
React.createElement("p", null, "...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles and slows your page load down. Instead you can import the specific paths to trim down your bundle size:"),
React.createElement("div", { className: 'ms-GettingStartedPage-code' },
React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, "import { Button } from 'office-ui-fabric-react/lib/Button';\nimport { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';\nimport { List } from 'office-ui-fabric-react/lib/List';")),
React.createElement("h2", null, "Using an AMD bundler like r.js"),
React.createElement("p", null, "\n If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location.\n ")));
};
return GettingStartedPage;
}(React.Component));
exports.GettingStartedPage = GettingStartedPage;
//# sourceMappingURL=GettingStartedPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {};
load_themed_styles_1.loadStyles([{ "rawString": ".ms-GettingStartedPage{margin-top:-20px;padding:40px}.ms-GettingStartedPage h1{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:28px;font-weight:100}.ms-GettingStartedPage h2{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100}.ms-GettingStartedPage h3{font-family:\"Segoe UI WestEuropean\",\"Segoe UI\",-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300}.ms-GettingStartedPage-banner{padding:1px 20px;margin:-20px;margin-bottom:20px;border-bottom:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.ms-GettingStartedPage-banner h1{margin-bottom:0}.ms-GettingStartedPage-banner h3{margin-top:0}@media (max-width:1023px){.ms-GettingStartedPage-banner{margin:-20px 0;margin-bottom:20px}}.ms-GettingStartedPage-code{background:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";padding:20px}.ms-GettingStartedPage-code pre{margin:0}.ms-GettingStartedPage-code .hljs{background:inherit;padding:0}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=GettingStartedPage.scss.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 2 2 2 2 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var ReactDOM = require("react-dom");
var AppDefinition_1 = require("./AppDefinition");
var index_1 = require("office-ui-fabric-react/lib/utilities/router/index");
var GettingStartedPage_1 = require("./GettingStartedPage");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var Fabric_1 = require("office-ui-fabric-react/lib/Fabric");
require("./index.scss");
require("./ColorStyles.scss");
Utilities_1.setBaseUrl('./dist/');
var rootElement;
// Return the anchor link from the URL without the hash
function _extractAnchorLink(path) {
var index = path.lastIndexOf('#');
if (index >= 0) {
path = path.substr(index + 1, path.length - index);
}
return path;
}
function _scrollAnchorLink() {
if ((window.location.hash.match(/#/g) || []).length > 1) {
var anchor = _extractAnchorLink(window.location.hash);
document.getElementById(anchor).scrollIntoView();
}
}
function _onLoad() {
rootElement = rootElement || document.getElementById('content');
ReactDOM.render(React.createElement(Fabric_1.Fabric, null,
React.createElement(index_1.Router, { onNewRouteLoaded: _scrollAnchorLink }, _getRoutes())), rootElement);
}
function _getRoutes() {
var routes = AppDefinition_1.AppDefinition.testPages.map(function (page) { return React.createElement(index_1.Route, { key: page.key, path: page.url, component: page.component }); });
var appRoutes = [];
AppDefinition_1.AppDefinition.examplePages.forEach(function (group) {
group.links
.filter(function (link) { return link.hasOwnProperty('component') || link.hasOwnProperty('getComponent'); })
.forEach(function (link, linkIndex) {
var component = link.component, getComponent = link.getComponent;
appRoutes.push(React.createElement(index_1.Route, { key: link.key, path: link.url, component: component, getComponent: getComponent }));
});
});
// Default route.
appRoutes.push(React.createElement(index_1.Route, { key: 'gettingstarted', component: GettingStartedPage_1.GettingStartedPage }));
routes.push(React.createElement(index_1.Route, { key: 'app', component: AppDefinition_1.App }, appRoutes));
return routes;
}
function _onUnload() {
if (rootElement) {
ReactDOM.unmountComponentAtNode(rootElement);
}
}
var isReady = document.readyState === 'interactive' || document.readyState === 'complete';
if (isReady) {
_onLoad();
}
else {
window.onload = _onLoad;
}
window.onunload = _onUnload;
//# sourceMappingURL=index.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 | 2 2 2 | "use strict";
/* tslint:disable */
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var styles = {};
load_themed_styles_1.loadStyles([{ "rawString": "body,html{-webkit-tap-highlight-color:transparent}" }]);
module.exports = styles;
/* tslint:enable */
//# sourceMappingURL=index.scss.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| positioning.js | 10.61% | (33 / 311) | 0% | (0 / 141) | 0% | (0 / 33) | 10.71% | (33 / 308) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 | 2 2 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DirectionalHint_1 = require("../common/DirectionalHint");
var Utilities_1 = require("../Utilities");
var RectangleEdge;
(function (RectangleEdge) {
RectangleEdge[RectangleEdge["top"] = 0] = "top";
RectangleEdge[RectangleEdge["bottom"] = 1] = "bottom";
RectangleEdge[RectangleEdge["left"] = 2] = "left";
RectangleEdge[RectangleEdge["right"] = 3] = "right";
})(RectangleEdge = exports.RectangleEdge || (exports.RectangleEdge = {}));
var SLIDE_ANIMATIONS = (_a = {},
_a[RectangleEdge.top] = 'slideUpIn20',
_a[RectangleEdge.bottom] = 'slideDownIn20',
_a[RectangleEdge.left] = 'slideLeftIn20',
_a[RectangleEdge.right] = 'slideRightIn20',
_a);
var PositionData = (function () {
function PositionData(calloutDirection, targetDirection, calloutPercent, targetPercent, beakPercent, isAuto) {
this.calloutDirection = calloutDirection;
this.targetDirection = targetDirection;
this.calloutPercent = calloutPercent;
this.targetPercent = targetPercent;
this.beakPercent = beakPercent;
this.isAuto = isAuto;
}
return PositionData;
}());
exports.PositionData = PositionData;
// Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target
var DirectionalDictionary = (_b = {},
_b[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, false),
_b[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 50, 50, 50, false),
_b[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 100, 100, 50, false),
_b[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, true),
_b[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, false),
_b[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 50, 50, 50, false),
_b[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 100, 100, 50, false),
_b[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, true),
_b[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 0, 0, 50, false),
_b[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.right, RectangleEdge.left, 50, 50, 50, false),
_b[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 100, 100, 50, false),
_b[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 0, 0, 50, false),
_b[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.left, RectangleEdge.right, 50, 50, 50, false),
_b[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 100, 100, 50, false),
_b);
var CoverDictionary = (_c = {},
_c[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, false),
_c[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.top, RectangleEdge.top, 50, 50, 50, false),
_c[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 100, 100, 50, false),
_c[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, true),
_c[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, false),
_c[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 50, 50, 50, false),
_c[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 100, 100, 50, false),
_c[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, true),
_c[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 0, 0, 50, false),
_c[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.left, RectangleEdge.left, 50, 50, 50, false),
_c[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 100, 100, 50, false),
_c[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 0, 0, 50, false),
_c[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.right, RectangleEdge.right, 50, 50, 50, false),
_c[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 100, 100, 50, false),
_c);
var OppositeEdgeDictionary = (_d = {},
_d[RectangleEdge.top] = RectangleEdge.bottom,
_d[RectangleEdge.bottom] = RectangleEdge.top,
_d[RectangleEdge.right] = RectangleEdge.left,
_d[RectangleEdge.left] = RectangleEdge.right,
_d);
function getRelativePositions(props, hostElement, calloutElement) {
var beakWidth = !props.isBeakVisible ? 0 : props.beakWidth;
var borderWidth = positioningFunctions._getBorderSize(calloutElement);
var gap = positioningFunctions._calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0);
var boundingRect = props.bounds ?
positioningFunctions._getRectangleFromIRect(props.bounds) :
new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight);
var targetRect = props.target ? positioningFunctions._getTargetRect(boundingRect, props.target) : positioningFunctions._getTargetRectDEPRECATED(boundingRect, props.targetElement, props.creationEvent, props.targetPoint, props.useTargetPoint);
var positionData = positioningFunctions._getPositionData(props.directionalHint, targetRect, boundingRect, props.coverTarget);
var positionedCallout = positioningFunctions._positionCalloutWithinBounds(positioningFunctions._getRectangleFromHTMLElement(calloutElement), targetRect, boundingRect, positionData, gap, props.coverTarget, props.directionalHintFixed);
var beakPositioned = positioningFunctions._positionBeak(beakWidth, positionedCallout, targetRect, borderWidth);
var finalizedCallout = positioningFunctions._finalizeCalloutPosition(positionedCallout.calloutRectangle, hostElement);
return {
calloutPosition: { top: finalizedCallout.top, left: finalizedCallout.left },
beakPosition: { top: beakPositioned.top, left: beakPositioned.left, display: 'block' },
directionalClassName: SLIDE_ANIMATIONS[positionedCallout.targetEdge],
submenuDirection: positionedCallout.calloutEdge === RectangleEdge.right ? DirectionalHint_1.DirectionalHint.leftBottomEdge : DirectionalHint_1.DirectionalHint.rightBottomEdge
};
}
exports.getRelativePositions = getRelativePositions;
/**
* Get's the maximum height that a rectangle can have in order to fit below or above a target.
* If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder
* of the target given.
* If no bounds are provided then the window is treated as the bounds.
*/
function getMaxHeight(target, targetEdge, gapSpace, bounds) {
if (gapSpace === void 0) { gapSpace = 0; }
var mouseTarget = target;
var elementTarget = target;
var targetRect;
var boundingRectangle = bounds ?
positioningFunctions._getRectangleFromIRect(bounds) :
new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight);
if (mouseTarget.stopPropagation) {
targetRect = new Utilities_1.Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY);
}
else {
targetRect = positioningFunctions._getRectangleFromHTMLElement(elementTarget);
}
return positioningFunctions._getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle);
}
exports.getMaxHeight = getMaxHeight;
var positioningFunctions;
(function (positioningFunctions) {
/**
* If max height is less than zero it returns the bounds height instead.
*/
function _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds) {
var maxHeight = 0;
switch (targetEdge) {
case DirectionalHint_1.DirectionalHint.bottomAutoEdge:
case DirectionalHint_1.DirectionalHint.bottomCenter:
case DirectionalHint_1.DirectionalHint.bottomLeftEdge:
case DirectionalHint_1.DirectionalHint.bottomRightEdge:
maxHeight = bounds.bottom - targetRectangle.bottom - gapSpace;
break;
case DirectionalHint_1.DirectionalHint.topAutoEdge:
case DirectionalHint_1.DirectionalHint.topCenter:
case DirectionalHint_1.DirectionalHint.topLeftEdge:
case DirectionalHint_1.DirectionalHint.topRightEdge:
maxHeight = targetRectangle.top - bounds.top - gapSpace;
break;
default:
maxHeight = bounds.bottom - targetRectangle.top - gapSpace;
break;
}
return maxHeight > 0 ? maxHeight : bounds.height;
}
positioningFunctions._getMaxHeightFromTargetRectangle = _getMaxHeightFromTargetRectangle;
function _getTargetRect(bounds, target) {
var targetRectangle;
if (target.preventDefault) {
var ev = target;
targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
}
else {
targetRectangle = _getRectangleFromHTMLElement(target);
}
if (!_isRectangleWithinBounds(targetRectangle, bounds)) {
var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);
for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) {
var direction = outOfBounds_1[_i];
targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];
}
}
return targetRectangle;
}
positioningFunctions._getTargetRect = _getTargetRect;
function _getTargetRectDEPRECATED(bounds, targetElement, ev, targetPoint, isTargetPoint) {
var targetRectangle;
if (isTargetPoint) {
if (targetPoint) {
targetRectangle = new Utilities_1.Rectangle(targetPoint.x, targetPoint.x, targetPoint.y, targetPoint.y);
}
else {
targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
}
}
else {
if (!targetElement) {
if (ev && ev.target) {
targetRectangle = _getRectangleFromHTMLElement(ev.target);
}
targetRectangle = new Utilities_1.Rectangle();
}
else {
targetRectangle = _getRectangleFromHTMLElement(targetElement);
}
}
if (!_isRectangleWithinBounds(targetRectangle, bounds)) {
var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);
for (var _i = 0, outOfBounds_2 = outOfBounds; _i < outOfBounds_2.length; _i++) {
var direction = outOfBounds_2[_i];
targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];
}
}
return targetRectangle;
}
positioningFunctions._getTargetRectDEPRECATED = _getTargetRectDEPRECATED;
function _getRectangleFromHTMLElement(element) {
var clientRect = element.getBoundingClientRect();
return new Utilities_1.Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);
}
positioningFunctions._getRectangleFromHTMLElement = _getRectangleFromHTMLElement;
function _positionCalloutWithinBounds(calloutRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) {
if (gap === void 0) { gap = 0; }
var estimatedRectangle = _moveRectangleToAnchorRectangle(calloutRectangle, directionalInfo.calloutDirection, directionalInfo.calloutPercent, targetRectangle, directionalInfo.targetDirection, directionalInfo.targetPercent, gap);
if (_isRectangleWithinBounds(estimatedRectangle, boundingRectangle)) {
return { calloutRectangle: estimatedRectangle, calloutEdge: directionalInfo.calloutDirection, targetEdge: directionalInfo.targetDirection, alignPercent: directionalInfo.calloutPercent, beakPercent: directionalInfo.beakPercent };
}
else {
return _getBestRectangleFitWithinBounds(estimatedRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed);
}
}
positioningFunctions._positionCalloutWithinBounds = _positionCalloutWithinBounds;
function _getBestRectangleFitWithinBounds(estimatedPosition, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) {
var callout = {
calloutRectangle: estimatedPosition,
calloutEdge: directionalInfo.calloutDirection,
targetEdge: directionalInfo.targetDirection,
alignPercent: directionalInfo.calloutPercent,
beakPercent: directionalInfo.beakPercent
};
// If it can't possibly fit within the bounds just put it into it's initial position.
if (!_canRectangleFitWithinBounds(estimatedPosition, boundingRectangle)) {
return callout;
}
if (!coverTarget && !directionalHintFixed) {
callout = _flipRectangleToFit(callout, targetRectangle, directionalInfo.targetPercent, boundingRectangle, gap);
}
var outOfBounds = _getOutOfBoundsEdges(callout.calloutRectangle, boundingRectangle);
for (var _i = 0, outOfBounds_3 = outOfBounds; _i < outOfBounds_3.length; _i++) {
var direction = outOfBounds_3[_i];
callout.calloutRectangle = _alignEdgeToCoordinate(callout.calloutRectangle, boundingRectangle[RectangleEdge[direction]], direction);
var adjustedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.targetEdge, targetRectangle, callout.targetEdge, directionalInfo.targetPercent);
callout.alignPercent = adjustedPercent;
}
return callout;
}
positioningFunctions._getBestRectangleFitWithinBounds = _getBestRectangleFitWithinBounds;
function _positionBeak(beakWidth, callout, targetRectangle, border) {
var calloutRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, 0, callout.calloutRectangle.height - border * 2);
var beakRectangle = new Utilities_1.Rectangle(0, beakWidth, 0, beakWidth);
var recalculatedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.calloutEdge, targetRectangle, callout.targetEdge, callout.beakPercent);
var estimatedTargetPoint = _getPointOnEdgeFromPercent(calloutRect, callout.calloutEdge, recalculatedPercent);
return _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border);
}
positioningFunctions._positionBeak = _positionBeak;
function _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border) {
var beakPixelSize = _calculateActualBeakWidthInPixels(beakRectangle.width) / 2;
var innerRect = null;
var beakPoint = { x: beakRectangle.width / 2, y: beakRectangle.width / 2 };
if (callout.calloutEdge === RectangleEdge.bottom || callout.calloutEdge === RectangleEdge.top) {
innerRect = new Utilities_1.Rectangle(beakPixelSize, callout.calloutRectangle.width - beakPixelSize - border * 2, 0, callout.calloutRectangle.height - border * 2);
}
else {
innerRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, beakPixelSize, callout.calloutRectangle.height - beakPixelSize - border * 2);
}
var finalPoint = _getClosestPointOnEdgeToPoint(innerRect, callout.calloutEdge, estimatedTargetPoint);
return _movePointOnRectangleToPoint(beakRectangle, beakPoint, finalPoint);
}
positioningFunctions._finalizeBeakPosition = _finalizeBeakPosition;
function _getRectangleFromIRect(rect) {
return new Utilities_1.Rectangle(rect.left, rect.right, rect.top, rect.bottom);
}
positioningFunctions._getRectangleFromIRect = _getRectangleFromIRect;
function _finalizeCalloutPosition(calloutRectangle, hostElement) {
var hostRect = _getRectangleFromHTMLElement(hostElement);
var topPosition = calloutRectangle.top - hostRect.top;
var leftPosition = calloutRectangle.left - hostRect.left;
return new Utilities_1.Rectangle(leftPosition, leftPosition + calloutRectangle.width, topPosition, topPosition + calloutRectangle.height);
}
positioningFunctions._finalizeCalloutPosition = _finalizeCalloutPosition;
/**
* Finds the percent on the recalculateRect that matches the percent on the target rect based on position.
*/
function _recalculateMatchingPercents(recalculateRect, rectangleEdge, targetRect, targetEdge, targetPercent) {
var targetPoint = _getPointOnEdgeFromPercent(targetRect, targetEdge, targetPercent);
var adjustedPoint = _getClosestPointOnEdgeToPoint(recalculateRect, rectangleEdge, targetPoint);
var adjustedPercent = _getPercentOfEdgeFromPoint(recalculateRect, rectangleEdge, adjustedPoint);
if (adjustedPercent > 100) {
adjustedPercent = 100;
}
else if (adjustedPercent < 0) {
adjustedPercent = 0;
}
return adjustedPercent;
}
positioningFunctions._recalculateMatchingPercents = _recalculateMatchingPercents;
function _canRectangleFitWithinBounds(rect, boundingRect) {
if (rect.width > boundingRect.width || rect.height > boundingRect.height) {
return false;
}
return true;
}
positioningFunctions._canRectangleFitWithinBounds = _canRectangleFitWithinBounds;
function _isRectangleWithinBounds(rect, boundingRect) {
if (rect.top < boundingRect.top) {
return false;
}
if (rect.bottom > boundingRect.bottom) {
return false;
}
if (rect.left < boundingRect.left) {
return false;
}
if (rect.right > boundingRect.right) {
return false;
}
return true;
}
positioningFunctions._isRectangleWithinBounds = _isRectangleWithinBounds;
/**
* Gets all of the edges of a rectangle that are outside of the given bounds.
* If there are no out of bounds edges it returns an empty array.
*/
function _getOutOfBoundsEdges(rect, boundingRect) {
var outOfBounds = new Array();
if (rect.top < boundingRect.top) {
outOfBounds.push(RectangleEdge.top);
}
if (rect.bottom > boundingRect.bottom) {
outOfBounds.push(RectangleEdge.bottom);
}
if (rect.left < boundingRect.left) {
outOfBounds.push(RectangleEdge.left);
}
if (rect.right > boundingRect.right) {
outOfBounds.push(RectangleEdge.right);
}
return outOfBounds;
}
positioningFunctions._getOutOfBoundsEdges = _getOutOfBoundsEdges;
/**
* Returns a point on a edge that is x% of the way down it.
*/
function _getPointOnEdgeFromPercent(rect, direction, percentOfRect) {
var startPoint;
var endPoint;
switch (direction) {
case RectangleEdge.top:
startPoint = { x: rect.left, y: rect.top };
endPoint = { x: rect.right, y: rect.top };
break;
case RectangleEdge.left:
startPoint = { x: rect.left, y: rect.top };
endPoint = { x: rect.left, y: rect.bottom };
break;
case RectangleEdge.right:
startPoint = { x: rect.right, y: rect.top };
endPoint = { x: rect.right, y: rect.bottom };
break;
case RectangleEdge.bottom:
startPoint = { x: rect.left, y: rect.bottom };
endPoint = { x: rect.right, y: rect.bottom };
break;
default:
startPoint = { x: 0, y: 0 };
endPoint = { x: 0, y: 0 };
break;
}
return _calculatePointPercentAlongLine(startPoint, endPoint, percentOfRect);
}
positioningFunctions._getPointOnEdgeFromPercent = _getPointOnEdgeFromPercent;
/**
* Gets the percent down an edge that a point appears.
*/
function _getPercentOfEdgeFromPoint(rect, direction, valueOnEdge) {
switch (direction) {
case RectangleEdge.top:
case RectangleEdge.bottom:
return rect.width !== 0 ? (valueOnEdge.x - rect.left) / rect.width * 100 : 100;
case RectangleEdge.left:
case RectangleEdge.right:
return rect.height !== 0 ? (valueOnEdge.y - rect.top) / rect.height * 100 : 100;
}
}
positioningFunctions._getPercentOfEdgeFromPoint = _getPercentOfEdgeFromPoint;
/**
* Percent is based on distance from left to right or up to down. 0% would be left most, 100% would be right most.
*/
function _calculatePointPercentAlongLine(startPoint, endPoint, percent) {
var x = startPoint.x + ((endPoint.x - startPoint.x) * percent / 100);
var y = startPoint.y + ((endPoint.y - startPoint.y) * percent / 100);
return { x: x, y: y };
}
positioningFunctions._calculatePointPercentAlongLine = _calculatePointPercentAlongLine;
function _moveTopLeftOfRectangleToPoint(rect, destination) {
return new Utilities_1.Rectangle(destination.x, destination.x + rect.width, destination.y, destination.y + rect.height);
}
positioningFunctions._moveTopLeftOfRectangleToPoint = _moveTopLeftOfRectangleToPoint;
/**
* Aligns the given edge to the target coordinate.
*/
function _alignEdgeToCoordinate(rect, coordinate, direction) {
switch (direction) {
case RectangleEdge.top:
return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate });
case RectangleEdge.bottom:
return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate - rect.height });
case RectangleEdge.left:
return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate, y: rect.top });
case RectangleEdge.right:
return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate - rect.width, y: rect.top });
}
return new Utilities_1.Rectangle();
}
positioningFunctions._alignEdgeToCoordinate = _alignEdgeToCoordinate;
/**
* Moves a point on a given rectangle to the target point. Does not change the rectangles orientation.
*/
function _movePointOnRectangleToPoint(rect, rectanglePoint, targetPoint) {
var leftCornerXDifference = rectanglePoint.x - rect.left;
var leftCornerYDifference = rectanglePoint.y - rect.top;
return _moveTopLeftOfRectangleToPoint(rect, { x: targetPoint.x - leftCornerXDifference, y: targetPoint.y - leftCornerYDifference });
}
positioningFunctions._movePointOnRectangleToPoint = _movePointOnRectangleToPoint;
/**
* Moves the given rectangle a certain number of pixels in the given direction;
*/
function _moveRectangleInDirection(rect, moveDistance, direction) {
var xModifier = 0;
var yModifier = 0;
switch (direction) {
case RectangleEdge.top:
yModifier = moveDistance * -1;
break;
case RectangleEdge.left:
xModifier = moveDistance * -1;
break;
case RectangleEdge.right:
xModifier = moveDistance;
break;
case RectangleEdge.bottom:
yModifier = moveDistance;
break;
}
return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left + xModifier, y: rect.top + yModifier });
}
positioningFunctions._moveRectangleInDirection = _moveRectangleInDirection;
/**
* Moves the given rectangle to an anchor rectangle.
*/
function _moveRectangleToAnchorRectangle(rect, rectSide, rectPercent, anchorRect, anchorSide, anchorPercent, gap) {
if (gap === void 0) { gap = 0; }
var rectTargetPoint = _getPointOnEdgeFromPercent(rect, rectSide, rectPercent);
var anchorTargetPoint = _getPointOnEdgeFromPercent(anchorRect, anchorSide, anchorPercent);
var positionedRect = _movePointOnRectangleToPoint(rect, rectTargetPoint, anchorTargetPoint);
return _moveRectangleInDirection(positionedRect, gap, anchorSide);
}
positioningFunctions._moveRectangleToAnchorRectangle = _moveRectangleToAnchorRectangle;
/**
* Gets the closet point on an edge to the given point.
*/
function _getClosestPointOnEdgeToPoint(rect, edge, point) {
switch (edge) {
case RectangleEdge.top:
case RectangleEdge.bottom:
var x = void 0;
if (point.x > rect.right) {
x = rect.right;
}
else if (point.x < rect.left) {
x = rect.left;
}
else {
x = point.x;
}
return { x: x, y: rect[RectangleEdge[edge]] };
case RectangleEdge.left:
case RectangleEdge.right:
var y = void 0;
if (point.y > rect.bottom) {
y = rect.bottom;
}
else if (point.y < rect.top) {
y = rect.top;
}
else {
y = point.y;
}
return { x: rect[RectangleEdge[edge]], y: y };
}
}
positioningFunctions._getClosestPointOnEdgeToPoint = _getClosestPointOnEdgeToPoint;
// Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal.
// We still want to position the beak based on it's midpoint which does not change. It will
// be at (beakwidth / 2, beakwidth / 2)
function _calculateActualBeakWidthInPixels(beakWidth) {
return Math.sqrt(beakWidth * beakWidth * 2);
}
positioningFunctions._calculateActualBeakWidthInPixels = _calculateActualBeakWidthInPixels;
function _getBorderSize(element) {
var styles = getComputedStyle(element, null);
var topBorder = parseFloat(styles.borderTopWidth);
var bottomBorder = parseFloat(styles.borderBottomWidth);
var leftBorder = parseFloat(styles.borderLeftWidth);
var rightBorder = parseFloat(styles.borderRightWidth);
// If any of the borders are NaN default to 0
if (isNaN(topBorder) || isNaN(bottomBorder) || isNaN(leftBorder) || isNaN(rightBorder)) {
return 0;
}
// If all of the borders are the same size, any value;
if (topBorder === bottomBorder && bottomBorder === leftBorder && leftBorder === rightBorder) {
return topBorder;
}
// If the borders do not agree, return 0
return 0;
}
positioningFunctions._getBorderSize = _getBorderSize;
function _getPositionData(direction, target, boundingRect, coverTarget) {
var directionalInfo = coverTarget ? CoverDictionary[direction] : DirectionalDictionary[direction];
if (directionalInfo.isAuto) {
var center = _getPointOnEdgeFromPercent(target, directionalInfo.targetDirection, 50);
if (center.x <= boundingRect.width / 2) {
directionalInfo.calloutPercent = 0;
directionalInfo.targetPercent = 0;
}
else {
directionalInfo.calloutPercent = 100;
directionalInfo.targetPercent = 100;
}
}
return directionalInfo;
}
positioningFunctions._getPositionData = _getPositionData;
function _flipRectangleToFit(callout, targetRect, targetPercent, boundingRect, gap) {
var directions = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.top, RectangleEdge.bottom];
var currentEdge = callout.targetEdge;
// Make a copy to presever the original positioning.
var positionedCallout = Utilities_1.assign({}, callout);
// Keep switching sides until one is found with enough space. If all sides don't fit then return the unmodified callout.
for (var i = 0; i < 4; i++) {
var outOfBounds = _getOutOfBoundsEdges(positionedCallout.calloutRectangle, boundingRect);
var index = outOfBounds.indexOf(currentEdge);
var oppositeEdge = OppositeEdgeDictionary[currentEdge];
if (index > -1) {
directions.splice(directions.indexOf(currentEdge), 1);
currentEdge = directions.indexOf(oppositeEdge) > -1 ? oppositeEdge : directions.slice(-1)[0];
positionedCallout.calloutEdge = OppositeEdgeDictionary[currentEdge];
positionedCallout.targetEdge = currentEdge;
positionedCallout.calloutRectangle = _moveRectangleToAnchorRectangle(positionedCallout.calloutRectangle, positionedCallout.calloutEdge, positionedCallout.alignPercent, targetRect, positionedCallout.targetEdge, targetPercent, gap);
}
else {
return positionedCallout;
}
}
return callout;
}
positioningFunctions._flipRectangleToFit = _flipRectangleToFit;
})(positioningFunctions = exports.positioningFunctions || (exports.positioningFunctions = {}));
var _a, _b, _c, _d;
//# sourceMappingURL=positioning.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| colorValues.js | 100% | (2 / 2) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (2 / 2) | |
| colors.js | 15.89% | (24 / 151) | 0% | (0 / 59) | 0% | (0 / 22) | 15.89% | (24 / 151) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.COLOR_VALUES = {
aliceblue: [240, 248, 255],
antiquewhite: [250, 235, 215],
aqua: [0, 255, 255],
aquamarine: [127, 255, 212],
azure: [240, 255, 255],
beige: [245, 245, 220],
bisque: [255, 228, 196],
black: [0, 0, 0],
blanchedalmond: [255, 235, 205],
blue: [0, 0, 255],
blueviolet: [138, 43, 226],
brown: [165, 42, 42],
burlywood: [222, 184, 135],
cadetblue: [95, 158, 160],
chartreuse: [127, 255, 0],
chocolate: [210, 105, 30],
coral: [255, 127, 80],
cornflowerblue: [100, 149, 237],
cornsilk: [255, 248, 220],
crimson: [220, 20, 60],
cyan: [0, 255, 255],
darkblue: [0, 0, 139],
darkcyan: [0, 139, 139],
darkgoldenrod: [184, 132, 11],
darkgray: [169, 169, 169],
darkgreen: [0, 100, 0],
darkgrey: [169, 169, 169],
darkkhaki: [189, 183, 107],
darkmagenta: [139, 0, 139],
darkolivegreen: [85, 107, 47],
darkorange: [255, 140, 0],
darkorchid: [153, 50, 204],
darkred: [139, 0, 0],
darksalmon: [233, 150, 122],
darkseagreen: [143, 188, 143],
darkslateblue: [72, 61, 139],
darkslategray: [47, 79, 79],
darkslategrey: [47, 79, 79],
darkturquoise: [0, 206, 209],
darkviolet: [148, 0, 211],
deeppink: [255, 20, 147],
deepskyblue: [0, 191, 255],
dimgray: [105, 105, 105],
dimgrey: [105, 105, 105],
dodgerblue: [30, 144, 255],
firebrick: [178, 34, 34],
floralwhite: [255, 255, 240],
forestgreen: [34, 139, 34],
fuchsia: [255, 0, 255],
gainsboro: [220, 220, 220],
ghostwhite: [248, 248, 255],
gold: [255, 215, 0],
goldenrod: [218, 165, 32],
gray: [128, 128, 128],
green: [0, 128, 0],
greenyellow: [173, 255, 47],
grey: [128, 128, 128],
honeydew: [240, 255, 240],
hotpink: [255, 105, 180],
indianred: [205, 92, 92],
indigo: [75, 0, 130],
ivory: [255, 255, 240],
khaki: [240, 230, 140],
lavender: [230, 230, 250],
lavenderblush: [255, 240, 245],
lawngreen: [124, 252, 0],
lemonchiffon: [255, 250, 205],
lightblue: [173, 216, 230],
lightcoral: [240, 128, 128],
lightcyan: [224, 255, 255],
lightgoldenrodyellow: [250, 250, 210],
lightgray: [211, 211, 211],
lightgreen: [144, 238, 144],
lightgrey: [211, 211, 211],
lightpink: [255, 182, 193],
lightsalmon: [255, 160, 122],
lightseagreen: [32, 178, 170],
lightskyblue: [135, 206, 250],
lightslategray: [119, 136, 153],
lightslategrey: [119, 136, 153],
lightsteelblue: [176, 196, 222],
lightyellow: [255, 255, 224],
lime: [0, 255, 0],
limegreen: [50, 205, 50],
linen: [250, 240, 230],
magenta: [255, 0, 255],
maroon: [128, 0, 0],
mediumaquamarine: [102, 205, 170],
mediumblue: [0, 0, 205],
mediumorchid: [186, 85, 211],
mediumpurple: [147, 112, 219],
mediumseagreen: [60, 179, 113],
mediumslateblue: [123, 104, 238],
mediumspringgreen: [0, 250, 154],
mediumturquoise: [72, 209, 204],
mediumvioletred: [199, 21, 133],
midnightblue: [25, 25, 112],
mintcream: [245, 255, 250],
mistyrose: [255, 228, 225],
moccasin: [255, 228, 181],
navajowhite: [255, 222, 173],
navy: [0, 0, 128],
oldlace: [253, 245, 230],
olive: [128, 128, 0],
olivedrab: [107, 142, 35],
orange: [255, 165, 0],
orangered: [255, 69, 0],
orchid: [218, 112, 214],
palegoldenrod: [238, 232, 170],
palegreen: [152, 251, 152],
paleturquoise: [175, 238, 238],
palevioletred: [219, 112, 147],
papayawhip: [255, 239, 213],
peachpuff: [255, 218, 185],
peru: [205, 133, 63],
pink: [255, 192, 203],
plum: [221, 160, 203],
powderblue: [176, 224, 230],
purple: [128, 0, 128],
rebeccapurple: [102, 51, 153],
red: [255, 0, 0],
rosybrown: [188, 143, 143],
royalblue: [65, 105, 225],
saddlebrown: [139, 69, 19],
salmon: [250, 128, 114],
sandybrown: [244, 164, 96],
seagreen: [46, 139, 87],
seashell: [255, 245, 238],
sienna: [160, 82, 45],
silver: [192, 192, 192],
skyblue: [135, 206, 235],
slateblue: [106, 90, 205],
slategray: [119, 128, 144],
slategrey: [119, 128, 144],
snow: [255, 255, 250],
springgreen: [0, 255, 127],
steelblue: [70, 130, 180],
tan: [210, 180, 140],
teal: [0, 128, 128],
thistle: [216, 191, 216],
tomato: [255, 99, 71],
turquoise: [64, 224, 208],
violet: [238, 130, 238],
wheat: [245, 222, 179],
white: [255, 255, 255],
whitesmoke: [245, 245, 245],
yellow: [255, 255, 0],
yellowgreen: [154, 205, 5]
};
//# sourceMappingURL=colorValues.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 | 6 6 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../../Utilities");
var colorValues_1 = require("./colorValues");
exports.MAX_COLOR_SATURATION = 100;
exports.MAX_COLOR_HUE = 359;
exports.MAX_COLOR_VALUE = 100;
exports.MAX_COLOR_RGBA = 255;
function cssColor(color) {
return _named(color)
|| _hex3(color)
|| _hex6(color)
|| _rgb(color)
|| _rgba(color)
|| _hsl(color)
|| _hsla(color);
}
exports.cssColor = cssColor;
function rgb2hex(r, g, b) {
return [
_numberToPaddedHex(r),
_numberToPaddedHex(g),
_numberToPaddedHex(b)
].join('');
}
exports.rgb2hex = rgb2hex;
function hsv2hex(h, s, v) {
var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b;
return rgb2hex(r, g, b);
}
exports.hsv2hex = hsv2hex;
function rgb2hsv(r, g, b) {
var h;
var s;
var v;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
// hue
if (delta === 0) {
h = 0;
}
else if (r === max) {
h = ((g - b) / delta) % 6;
}
else if (g === max) {
h = (b - r) / delta + 2;
}
else if (b === max) {
h = (r - g) / delta + 4;
}
h = Math.round(h * 60);
if (h < 0) {
h += 360;
}
// saturation
s = Math.round((max === 0 ? 0 : (delta / max)) * 100);
// value
v = Math.round(max / 255 * 100);
return { h: h, s: s, v: v };
}
exports.rgb2hsv = rgb2hsv;
function hsl2hsv(h, s, l) {
s *= ((l < 50) ? l : (100 - l)) / 100;
return {
h: h,
s: 2 * s / (l + s) * 100,
v: l + s
};
}
exports.hsl2hsv = hsl2hsv;
function hsv2hsl(h, s, v) {
s /= exports.MAX_COLOR_SATURATION;
v /= exports.MAX_COLOR_VALUE;
var l = (2 - s) * v;
var sl = s * v;
sl /= (l <= 1) ? l : 2 - l;
sl = sl || 0;
l /= 2;
return { h: h, s: sl * 100, l: l * 100 };
}
exports.hsv2hsl = hsv2hsl;
function hsl2rgb(h, s, l) {
var hsv = hsl2hsv(h, s, l);
return hsv2rgb(hsv.h, hsv.s, hsv.v);
}
exports.hsl2rgb = hsl2rgb;
function hsv2rgb(h, s, v) {
s = s / 100;
v = v / 100;
var rgb = [];
var c = v * s;
var hh = h / 60;
var x = c * (1 - Math.abs(hh % 2 - 1));
var m = v - c;
switch (Math.floor(hh)) {
case 0:
rgb = [c, x, 0];
break;
case 1:
rgb = [x, c, 0];
break;
case 2:
rgb = [0, c, x];
break;
case 3:
rgb = [0, x, c];
break;
case 4:
rgb = [x, 0, c];
break;
case 5:
rgb = [c, 0, x];
break;
}
return {
r: Math.round(exports.MAX_COLOR_RGBA * (rgb[0] + m)),
g: Math.round(exports.MAX_COLOR_RGBA * (rgb[1] + m)),
b: Math.round(exports.MAX_COLOR_RGBA * (rgb[2] + m))
};
}
exports.hsv2rgb = hsv2rgb;
function getColorFromString(color) {
var _a = cssColor(color), a = _a.a, b = _a.b, g = _a.g, r = _a.r;
var _b = rgb2hsv(r, g, b), h = _b.h, s = _b.s, v = _b.v;
return {
a: a,
b: b,
g: g,
h: h,
hex: rgb2hex(r, g, b),
r: r,
s: s,
str: color,
v: v
};
}
exports.getColorFromString = getColorFromString;
function getColorFromRGBA(rgba) {
var a = rgba.a, b = rgba.b, g = rgba.g, r = rgba.r;
var _a = rgb2hsv(r, g, b), h = _a.h, s = _a.s, v = _a.v;
var hex = rgb2hex(r, g, b);
return {
a: a,
b: b,
g: g,
h: h,
hex: hex,
r: r,
s: s,
str: (a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + a / 100 + ")",
v: v
};
}
exports.getColorFromRGBA = getColorFromRGBA;
function getFullColorString(color) {
return "#" + hsv2hex(color.h, exports.MAX_COLOR_SATURATION, exports.MAX_COLOR_VALUE);
}
exports.getFullColorString = getFullColorString;
function updateSV(color, s, v) {
var _a = hsv2rgb(color.h, s, v), r = _a.r, g = _a.g, b = _a.b;
var hex = rgb2hex(r, g, b);
return {
a: color.a,
b: b,
g: g,
h: color.h,
hex: hex,
r: r,
s: s,
str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")",
v: v
};
}
exports.updateSV = updateSV;
function updateH(color, h) {
var _a = hsv2rgb(h, color.s, color.v), r = _a.r, g = _a.g, b = _a.b;
var hex = rgb2hex(r, g, b);
return {
a: color.a,
b: b,
g: g,
h: h,
hex: hex,
r: r,
s: color.s,
str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")",
v: color.v
};
}
exports.updateH = updateH;
function updateA(color, a) {
return Utilities_1.assign({}, color, {
a: a,
str: (a === 100) ? "#" + color.hex : "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a / 100 + ")"
});
}
exports.updateA = updateA;
function _numberToPaddedHex(num) {
var hex = num.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}
function _named(str) {
var c = colorValues_1.COLOR_VALUES[str.toLowerCase()];
if (c) {
return {
r: c[0],
g: c[1],
b: c[2],
a: 100
};
}
}
function _rgb(str) {
if (0 === str.indexOf('rgb(')) {
str = str.match(/rgb\(([^)]+)\)/)[1];
var parts = str.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
b: parts[2],
a: 100
};
}
}
function _rgba(str) {
if (str.indexOf('rgba(') === 0) {
str = str.match(/rgba\(([^)]+)\)/)[1];
var parts = str.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
b: parts[2],
a: parts[3] * 100
};
}
}
function _hex6(str) {
if ('#' === str[0] && 7 === str.length) {
return {
r: parseInt(str.slice(1, 3), 16),
g: parseInt(str.slice(3, 5), 16),
b: parseInt(str.slice(5, 7), 16),
a: 100
};
}
}
function _hex3(str) {
if ('#' === str[0] && 4 === str.length) {
return {
r: parseInt(str[1] + str[1], 16),
g: parseInt(str[2] + str[2], 16),
b: parseInt(str[3] + str[3], 16),
a: 100
};
}
}
function _hsl(str) {
if (str.indexOf('hsl(') === 0) {
str = str.match(/hsl\(([^)]+)\)/)[1];
var parts = str.split(/ *, */);
var h = parseInt(parts[0], 10);
var s = parseInt(parts[1], 10);
var l = parseInt(parts[2], 10);
var rgba = hsl2rgb(h, s, l);
rgba.a = 100;
return rgba;
}
}
function _hsla(str) {
if (str.indexOf('hsla(') === 0) {
str = str.match(/hsla\(([^)]+)\)/)[1];
var parts = str.split(/ *, */);
var h = parseInt(parts[0], 10);
var s = parseInt(parts[1], 10);
var l = parseInt(parts[2], 10);
var a = parseInt(parts[3], 10) * 100;
var rgba = hsl2rgb(h, s, l);
rgba.a = a;
return rgba;
}
}
//# sourceMappingURL=colors.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 4 4 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./colors")); //# sourceMappingURL=index.js.map |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DateMath.js | 32.47% | (25 / 77) | 0% | (0 / 22) | 0% | (0 / 12) | 32.47% | (25 / 77) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DateValues_1 = require("../dateValues/DateValues");
var DAYS_IN_WEEK = 7;
var MONTHS_IN_YEAR = 12;
/**
* Returns a date offset from the given date by the specified number of days.
* @param {Date} date - The origin date
* @param {number} days - The number of days to offset. 'days' can be negative.
* @return {Date} A new Date object offset from the origin date by the given number of days
*/
function addDays(date, days) {
var result = new Date(date.getTime());
result.setDate(result.getDate() + days);
return result;
}
exports.addDays = addDays;
/**
* Returns a date offset from the given date by the specified number of weeks.
* @param {Date} date - The origin date
* @param {number} weeks - The number of weeks to offset. 'weeks' can be negative.
* @return {Date} A new Date object offset from the origin date by the given number of weeks
*/
function addWeeks(date, weeks) {
return addDays(date, weeks * DAYS_IN_WEEK);
}
exports.addWeeks = addWeeks;
/**
* Returns a date offset from the given date by the specified number of months.
* The method tries to preserve the day-of-month; however, if the new month does not have enough days
* to contain the original day-of-month, we'll use the last day of the new month.
* @param {Date} date - The origin date
* @param {number} months - The number of months to offset. 'months' can be negative.
* @return {Date} A new Date object offset from the origin date by the given number of months
*/
function addMonths(date, months) {
var result = new Date(date.getTime());
var newMonth = result.getMonth() + months;
result.setMonth(newMonth);
// We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
// Loop until we back up to a day the new month has.
// (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)
if (result.getMonth() !== ((newMonth % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) {
result = addDays(result, -result.getDate());
}
return result;
}
exports.addMonths = addMonths;
/**
* Returns a date offset from the given date by the specified number of years.
* The method tries to preserve the day-of-month; however, if the new month does not have enough days
* to contain the original day-of-month, we'll use the last day of the new month.
* @param {Date} date - The origin date
* @param {number} years - The number of years to offset. 'years' can be negative.
* @return {Date} A new Date object offset from the origin date by the given number of years
*/
function addYears(date, years) {
var result = new Date(date.getTime());
result.setFullYear(date.getFullYear() + years);
// We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
// Loop until we back up to a day the new month has.
// (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)
if (result.getMonth() !== ((date.getMonth() % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) {
result = addDays(result, -result.getDate());
}
return result;
}
exports.addYears = addYears;
/**
* Returns a date that is a copy of the given date, aside from the month changing to the given month.
* The method tries to preserve the day-of-month; however, if the new month does not have enough days
* to contain the original day-of-month, we'll use the last day of the new month.
* @param {Date} date - The origin date
* @param {number} month - The 0-based index of the month to set on the date.
* @return {Date} A new Date object with the given month set.
*/
function setMonth(date, month) {
return addMonths(date, month - date.getMonth());
}
exports.setMonth = setMonth;
/**
* Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal.
* @return {boolean} True if the two dates represent the same date (regardless of time-of-day), false otherwise.
*/
function compareDates(date1, date2) {
if (date1 == null && date2 == null) {
return true;
}
else if (date1 == null || date2 == null) {
return false;
}
else {
return (date1.getFullYear() === date2.getFullYear()
&& date1.getMonth() === date2.getMonth()
&& date1.getDate() === date2.getDate());
}
}
exports.compareDates = compareDates;
/**
* Compare the date parts of two dates
* @param {Date} date1 - The first date to compare
* @param {Date} date2 - The second date to compare
* @returns {Number} A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value
* if date1 is later than date2.
*/
function compareDatePart(date1, date2) {
return getDatePartHashValue(date1) - getDatePartHashValue(date2);
}
exports.compareDatePart = compareDatePart;
/**
* Gets the date range array including the specified date. The date range array is calculated as the list
* of dates accounting for the specified first day of the week and date range type.
* @param {Date} date - The input date
* @param {DateRangeType} dateRangeType - The desired date range type, i.e., day, week, month, etc.
* @param {DayOfWeek} dayOfWeek - The first day of the week.
* @returns {Date[]} An array of dates representing the date range containing the specified date.
*/
function getDateRangeArray(date, dateRangeType, firstDayOfWeek) {
var datesArray = new Array();
var startDate = null;
var endDate = null;
switch (dateRangeType) {
case DateValues_1.DateRangeType.Day:
startDate = getDatePart(date);
endDate = addDays(startDate, 1);
break;
case DateValues_1.DateRangeType.Week:
startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek);
endDate = addDays(startDate, DAYS_IN_WEEK);
break;
case DateValues_1.DateRangeType.Month:
startDate = new Date(date.getFullYear(), date.getMonth(), 1);
endDate = addMonths(startDate, 1);
break;
}
// Populate the dates array with the dates in range
datesArray.push(startDate);
var nextDate = addDays(startDate, 1);
while (!compareDates(nextDate, endDate)) {
datesArray.push(nextDate);
nextDate = addDays(nextDate, 1);
}
return datesArray;
}
exports.getDateRangeArray = getDateRangeArray;
/**
* Checks whether the specified date is in the given date range.
* @param {Date} date - The origin date
* @param {Date[]} dateRange - An array of dates to do the lookup on
* @returns {bool} True if the date matches one of the dates in the specified array, false otherwise.
*/
function isInDateRangeArray(date, dateRange) {
for (var _i = 0, dateRange_1 = dateRange; _i < dateRange_1.length; _i++) {
var dateInRange = dateRange_1[_i];
if (compareDates(date, dateInRange)) {
return true;
}
}
return false;
}
exports.isInDateRangeArray = isInDateRangeArray;
/**
* Gets a new date with the time portion zeroed out, i.e., set to midnight
* @param {Date} date - The origin date
* @returns {Date} A new date with the time set to midnight
*/
function getDatePart(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
/**
* Gets the date for the first day of the week based on the given date assuming
* the specified first day of the week.
* @param {Date} date - The date to find the beginning of the week date for.
* @return {Date} A new date object representing the first day of the week containing the input date.
*/
function getStartDateOfWeek(date, firstDayOfWeek) {
var daysOffset = firstDayOfWeek - date.getDay();
if (daysOffset > 0) {
// If first day of week is > date, go 1 week back, to ensure resulting date is in the past.
daysOffset -= DAYS_IN_WEEK;
}
return addDays(date, daysOffset);
}
/**
* Helper function to assist in date comparisons
*/
function getDatePartHashValue(date) {
// Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year.
/* tslint:disable:no-bitwise */
return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9);
/* tslint:enable:no-bitwise */
}
//# sourceMappingURL=DateMath.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DateValues.js | 100% | (15 / 15) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (15 / 15) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* The days of the week
*/
var DayOfWeek;
(function (DayOfWeek) {
DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday";
DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday";
DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday";
DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday";
DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday";
})(DayOfWeek = exports.DayOfWeek || (exports.DayOfWeek = {}));
/**
* The supported date range types
*/
var DateRangeType;
(function (DateRangeType) {
DateRangeType[DateRangeType["Day"] = 0] = "Day";
DateRangeType[DateRangeType["Week"] = 1] = "Week";
DateRangeType[DateRangeType["Month"] = 2] = "Month";
})(DateRangeType = exports.DateRangeType || (exports.DateRangeType = {}));
//# sourceMappingURL=DateValues.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| BaseDecorator.js | 25% | (7 / 28) | 23.53% | (4 / 17) | 12.5% | (1 / 8) | 28% | (7 / 25) | |
| withContainsFocus.js | 20.83% | (10 / 48) | 33.33% | (7 / 21) | 6.67% | (1 / 15) | 22.73% | (10 / 44) | |
| withResponsiveMode.js | 16.67% | (11 / 66) | 25.93% | (7 / 27) | 6.25% | (1 / 16) | 17.74% | (11 / 62) | |
| withViewport.js | 15.87% | (10 / 63) | 21.21% | (7 / 33) | 6.25% | (1 / 16) | 16.95% | (10 / 59) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 8 8 8 1 8 8 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../../Utilities");
var BaseDecorator = (function (_super) {
__extends(BaseDecorator, _super);
function BaseDecorator() {
var _this = _super.call(this) || this;
_this._shouldUpdateComponentRef = false;
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
return _this;
}
/**
* Updates the ref to the component composed by the decorator, which will also take care of hoisting
* (and unhoisting as appropriate) methods from said component.
*
* Pass this method as the argument to the 'ref' property of the composed component.
*/
BaseDecorator.prototype._updateComposedComponentRef = function (composedComponentInstance) {
this._composedComponentInstance = composedComponentInstance;
if (composedComponentInstance) {
this._hoisted = Utilities_1.hoistMethods(this, composedComponentInstance);
}
else if (this._hoisted) {
Utilities_1.unhoistMethods(this, this._hoisted);
}
};
return BaseDecorator;
}(Utilities_1.BaseComponent));
exports.BaseDecorator = BaseDecorator;
//# sourceMappingURL=BaseDecorator.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 2 2 2 1 2 2 2 2 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var BaseDecorator_1 = require("./BaseDecorator");
function withContainsFocus(ComposedComponent) {
return (function (_super) {
__extends(WithContainsFocusComponent, _super);
function WithContainsFocusComponent() {
var _this = _super.call(this) || this;
_this.state = {
containsFocus: false
};
_this._delayedSetContainsFocus = _this._async.debounce(_this._setContainsFocus, 20);
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
return _this;
}
WithContainsFocusComponent.prototype.componentWillUnmount = function () {
this._async.dispose();
};
WithContainsFocusComponent.prototype.render = function () {
var containsFocus = this.state.containsFocus;
return (React.createElement("div", { ref: 'root', onFocus: this._handleFocus.bind(this), onBlur: this._handleBlur.bind(this) },
React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, containsFocus: containsFocus }, this.props))));
};
WithContainsFocusComponent.prototype.forceUpdate = function () {
this._composedComponentInstance.forceUpdate();
};
WithContainsFocusComponent.prototype._handleFocus = function (ev) {
this._newContainsFocus = true;
this._delayedSetContainsFocus();
};
WithContainsFocusComponent.prototype._handleBlur = function (ev) {
this._newContainsFocus = false;
this._delayedSetContainsFocus();
};
WithContainsFocusComponent.prototype._setContainsFocus = function () {
if (this.state.containsFocus !== this._newContainsFocus) {
this.setState({ containsFocus: this._newContainsFocus });
}
};
return WithContainsFocusComponent;
}(BaseDecorator_1.BaseDecorator));
}
exports.withContainsFocus = withContainsFocus;
//# sourceMappingURL=withContainsFocus.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 2 2 2 1 2 2 2 2 1 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var BaseDecorator_1 = require("./BaseDecorator");
var Utilities_1 = require("../../Utilities");
var ResponsiveMode;
(function (ResponsiveMode) {
ResponsiveMode[ResponsiveMode["small"] = 0] = "small";
ResponsiveMode[ResponsiveMode["medium"] = 1] = "medium";
ResponsiveMode[ResponsiveMode["large"] = 2] = "large";
ResponsiveMode[ResponsiveMode["xLarge"] = 3] = "xLarge";
ResponsiveMode[ResponsiveMode["xxLarge"] = 4] = "xxLarge";
ResponsiveMode[ResponsiveMode["xxxLarge"] = 5] = "xxxLarge";
})(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {}));
var RESPONSIVE_MAX_CONSTRAINT = [
479,
639,
1023,
1365,
1919,
99999999
];
var _defaultMode;
/**
* Allows a server rendered scenario to provide a default responsive mode.
*/
function setResponsiveMode(responsiveMode) {
_defaultMode = responsiveMode;
}
exports.setResponsiveMode = setResponsiveMode;
function withResponsiveMode(ComposedComponent) {
return (function (_super) {
__extends(WithResponsiveMode, _super);
function WithResponsiveMode() {
var _this = _super.call(this) || this;
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
_this.state = {
responsiveMode: _this._getResponsiveMode()
};
return _this;
}
WithResponsiveMode.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'resize', function () {
var responsiveMode = _this._getResponsiveMode();
if (responsiveMode !== _this.state.responsiveMode) {
_this.setState({
responsiveMode: responsiveMode
});
}
});
};
WithResponsiveMode.prototype.componentWillUnmount = function () {
this._events.dispose();
};
WithResponsiveMode.prototype.render = function () {
var responsiveMode = this.state.responsiveMode;
return (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props)));
};
WithResponsiveMode.prototype._getResponsiveMode = function () {
var responsiveMode = ResponsiveMode.small;
var win = Utilities_1.getWindow();
if (typeof win !== 'undefined') {
while (win.innerWidth > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {
responsiveMode++;
}
}
else {
if (_defaultMode !== undefined) {
responsiveMode = _defaultMode;
}
else {
throw new Error('Content was rendered in a server environment without providing a default responsive mode. ' +
'Call setResponsiveMode to define what the responsive mode is.');
}
}
return responsiveMode;
};
return WithResponsiveMode;
}(BaseDecorator_1.BaseDecorator));
}
exports.withResponsiveMode = withResponsiveMode;
//# sourceMappingURL=withResponsiveMode.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 2 2 2 1 2 2 2 2 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var BaseDecorator_1 = require("./BaseDecorator");
var Utilities_1 = require("../../Utilities");
var RESIZE_DELAY = 500;
var MAX_RESIZE_ATTEMPTS = 3;
function withViewport(ComposedComponent) {
return (function (_super) {
__extends(WithViewportComponent, _super);
function WithViewportComponent() {
var _this = _super.call(this) || this;
/* Note: using lambda here because decorators don't seem to work in decorators. */
_this._updateViewport = function (withForceUpdate) {
var viewport = _this.state.viewport;
var viewportElement = _this.refs.root;
var scrollElement = Utilities_1.findScrollableParent(viewportElement);
var scrollRect = Utilities_1.getRect(scrollElement);
var clientRect = Utilities_1.getRect(viewportElement);
var updateComponent = function () {
if (withForceUpdate && _this._composedComponentInstance) {
_this._composedComponentInstance.forceUpdate();
}
};
var isSizeChanged = (clientRect.width !== viewport.width ||
scrollRect.height !== viewport.height);
if (isSizeChanged && _this._resizeAttempts < MAX_RESIZE_ATTEMPTS) {
_this._resizeAttempts++;
_this.setState({
viewport: {
width: clientRect.width,
height: scrollRect.height
}
}, _this._updateViewport);
}
else {
_this._resizeAttempts = 0;
updateComponent();
}
};
_this._resizeAttempts = 0;
_this.state = {
viewport: {
width: 0,
height: 0
}
};
return _this;
}
WithViewportComponent.prototype.componentDidMount = function () {
this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
leading: false
});
this._events.on(window, 'resize', this._onAsyncResize);
this._updateViewport();
};
WithViewportComponent.prototype.componentWillUnmount = function () {
this._events.dispose();
};
WithViewportComponent.prototype.render = function () {
var viewport = this.state.viewport;
var isViewportVisible = viewport.width > 0 && viewport.height > 0;
return (React.createElement("div", { className: 'ms-Viewport', ref: 'root', style: { minWidth: 1, minHeight: 1 } }, isViewportVisible && (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, viewport: viewport }, this.props)))));
};
WithViewportComponent.prototype.forceUpdate = function () {
this._updateViewport(true);
};
WithViewportComponent.prototype._onAsyncResize = function () {
this._updateViewport();
};
return WithViewportComponent;
}(BaseDecorator_1.BaseDecorator));
}
exports.withViewport = withViewport;
//# sourceMappingURL=withViewport.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| DragDropHelper.js | 2.23% | (4 / 179) | 0% | (0 / 102) | 0% | (0 / 21) | 2.23% | (4 / 179) | |
| index.js | 50% | (3 / 6) | 0% | (0 / 2) | 0% | (0 / 1) | 75% | (3 / 4) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 | 4 4 4 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ReactDOM = require("react-dom");
var Utilities_1 = require("../../Utilities");
var DISTANCE_FOR_DRAG_SQUARED = 25; // the minimum mouse move distance to treat it as drag event
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
var DragDropHelper = (function () {
function DragDropHelper(params) {
this._selection = params.selection;
this._dragEnterCounts = {};
this._activeTargets = {};
this._lastId = 0;
this._distanceSquaredForDrag = typeof params.minimumPixelsForDrag === 'number' ?
params.minimumPixelsForDrag * params.minimumPixelsForDrag : DISTANCE_FOR_DRAG_SQUARED;
this._events = new Utilities_1.EventGroup(this);
// clear drag data when mouse up, use capture event to ensure it will be run
this._events.on(document.body, 'mouseup', this._onMouseUp.bind(this), true);
this._events.on(document, 'mouseup', this._onDocumentMouseUp.bind(this), true);
}
DragDropHelper.prototype.dispose = function () {
this._events.dispose();
};
DragDropHelper.prototype.subscribe = function (root, events, dragDropOptions) {
var _this = this;
var _a = dragDropOptions.key, key = _a === void 0 ? "" + ++this._lastId : _a;
var handlers = [];
var onDragLeave;
var onDragEnter;
var onDragEnd;
var onDrop;
var onDragOver;
var onMouseDown;
var isDraggable;
var isDroppable;
var activeTarget;
if (dragDropOptions && root) {
var eventMap = dragDropOptions.eventMap, context_1 = dragDropOptions.context, updateDropState_1 = dragDropOptions.updateDropState;
var dragDropTarget = {
root: root,
options: dragDropOptions,
key: key
};
isDraggable = this._isDraggable(dragDropTarget);
isDroppable = this._isDroppable(dragDropTarget);
if (isDraggable || isDroppable) {
if (eventMap) {
for (var _i = 0, eventMap_1 = eventMap; _i < eventMap_1.length; _i++) {
var event_1 = eventMap_1[_i];
var handler = {
callback: event_1.callback.bind(null, context_1),
eventName: event_1.eventName
};
handlers.push(handler);
this._events.on(root, handler.eventName, handler.callback);
}
}
}
if (isDroppable) {
// If the target is droppable, wire up global event listeners to track drop-related events.
onDragLeave = function (event) {
if (!event.isHandled) {
event.isHandled = true;
_this._dragEnterCounts[key]--;
if (_this._dragEnterCounts[key] === 0) {
updateDropState_1(false /* isDropping */, event);
}
}
};
onDragEnter = function (event) {
event.preventDefault(); // needed for IE
if (!event.isHandled) {
event.isHandled = true;
_this._dragEnterCounts[key]++;
if (_this._dragEnterCounts[key] === 1) {
updateDropState_1(true /* isDropping */, event);
}
}
};
onDragEnd = function (event) {
_this._dragEnterCounts[key] = 0;
updateDropState_1(false /* isDropping */, event);
};
onDrop = function (event) {
_this._dragEnterCounts[key] = 0;
updateDropState_1(false /* isDropping */, event);
if (dragDropOptions.onDrop) {
dragDropOptions.onDrop(dragDropOptions.context.data, event);
}
};
onDragOver = function (event) {
event.preventDefault();
};
this._dragEnterCounts[key] = 0;
// dragenter and dragleave will be fired when hover to the child element
// but we only want to change state when enter or leave the current element
// use the count to ensure it.
events.on(root, 'dragenter', onDragEnter);
events.on(root, 'dragleave', onDragLeave);
events.on(root, 'dragend', onDragEnd);
events.on(root, 'drop', onDrop);
events.on(root, 'dragover', onDragOver);
}
if (isDraggable) {
// If the target is draggable, wire up local event listeners for mouse events.
onMouseDown = this._onMouseDown.bind(this, dragDropTarget);
onDragEnd = this._onDragEnd.bind(this, dragDropTarget);
events.on(root, 'mousedown', onMouseDown);
events.on(root, 'dragend', onDragEnd);
}
activeTarget = {
target: dragDropTarget,
dispose: function () {
if (_this._activeTargets[key] === activeTarget) {
delete _this._activeTargets[key];
}
if (root) {
for (var _i = 0, handlers_1 = handlers; _i < handlers_1.length; _i++) {
var handler = handlers_1[_i];
_this._events.off(root, handler.eventName, handler.callback);
}
if (isDroppable) {
events.off(root, 'dragenter', onDragEnter);
events.off(root, 'dragleave', onDragLeave);
events.off(root, 'dragend', onDragEnd);
events.off(root, 'dragover', onDragOver);
events.off(root, 'drop', onDrop);
}
if (isDraggable) {
events.off(root, 'mousedown', onMouseDown);
events.off(root, 'dragend', onDragEnd);
}
}
}
};
this._activeTargets[key] = activeTarget;
}
return {
key: key,
dispose: function () {
if (activeTarget) {
activeTarget.dispose();
}
}
};
};
DragDropHelper.prototype.unsubscribe = function (root, key) {
var activeTarget = this._activeTargets[key];
if (activeTarget) {
activeTarget.dispose();
}
};
DragDropHelper.prototype._onDragEnd = function (target, event) {
var options = target.options;
if (options.onDragEnd) {
options.onDragEnd(options.context.data, event);
}
};
/**
* clear drag data when mouse up on body
*/
DragDropHelper.prototype._onMouseUp = function (event) {
this._isDragging = false;
if (this._dragData) {
for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {
var key = _a[_i];
var activeTarget = this._activeTargets[key];
if (activeTarget.target.root) {
this._events.off(activeTarget.target.root, 'mousemove');
this._events.off(activeTarget.target.root, 'mouseleave');
}
}
if (this._dragData.dropTarget) {
// raise dragleave event to let dropTarget know it need to remove dropping style
Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');
Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'drop');
}
}
this._dragData = null;
};
/**
* clear drag data when mouse up outside of the document
*/
DragDropHelper.prototype._onDocumentMouseUp = function (event) {
if (event.target === document.documentElement) {
this._onMouseUp(event);
}
};
/**
* when mouse move over a new drop target while dragging some items,
* fire dragleave on the old target and fire dragenter to the new target
* The target will handle style change on dragenter and dragleave events.
*/
DragDropHelper.prototype._onMouseMove = function (target, event) {
var
// use buttons property here since ev.button in some edge case is not updating well during the move.
// but firefox doesn't support it, so we set the default value when it is not defined.
_a = event.buttons,
// use buttons property here since ev.button in some edge case is not updating well during the move.
// but firefox doesn't support it, so we set the default value when it is not defined.
buttons = _a === void 0 ? MOUSEMOVE_PRIMARY_BUTTON : _a;
if (this._dragData && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
// cancel mouse down event and return early when the primary button is not pressed
this._onMouseUp(event);
return;
}
var root = target.root, options = target.options, key = target.key;
if (this._isDragging) {
if (this._isDroppable(target)) {
// we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into
// the inner target (folder), we first set dropTarget to the inner element. But the same event is bubbled to the
// outer target too, and we need to prevent the outer one from taking over.
// So, check if the last dropTarget is not a child of the current.
if (this._dragData.dropTarget &&
this._dragData.dropTarget.key !== key &&
!this._isChild(root, this._dragData.dropTarget.root)) {
Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');
this._dragData.dropTarget = null;
}
if (!this._dragData.dropTarget) {
Utilities_1.EventGroup.raise(root, 'dragenter');
this._dragData.dropTarget = target;
}
}
}
else if (this._dragData) {
if (this._isDraggable(target)) {
var xDiff = this._dragData.clientX - event.clientX;
var yDiff = this._dragData.clientY - event.clientY;
if (xDiff * xDiff + yDiff * yDiff >= this._distanceSquaredForDrag) {
if (this._dragData.dragTarget) {
this._isDragging = true;
if (options.onDragStart) {
options.onDragStart(options.context.data, options.context.index, this._selection.getSelection(), event);
}
}
}
}
}
};
/**
* when mouse leave a target while dragging some items, fire dragleave to the target
*/
DragDropHelper.prototype._onMouseLeave = function (target, event) {
if (this._isDragging) {
if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) {
Utilities_1.EventGroup.raise(target.root, 'dragleave');
this._dragData.dropTarget = null;
}
}
};
/**
* when mouse down on a draggable item, we start to track dragdata.
*/
DragDropHelper.prototype._onMouseDown = function (target, event) {
if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) {
// Ignore anything except the primary button.
return;
}
if (this._isDraggable(target)) {
this._dragData = {
clientX: event.clientX,
clientY: event.clientY,
eventTarget: event.target,
dragTarget: target
};
for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {
var key = _a[_i];
var activeTarget = this._activeTargets[key];
if (activeTarget.target.root) {
this._events.on(activeTarget.target.root, 'mousemove', this._onMouseMove.bind(this, activeTarget.target));
this._events.on(activeTarget.target.root, 'mouseleave', this._onMouseLeave.bind(this, activeTarget.target));
}
}
}
else {
this._dragData = null;
}
};
/**
* determine whether the child target is a descendant of the parent
*/
DragDropHelper.prototype._isChild = function (parent, child) {
var parentElement = ReactDOM.findDOMNode(parent);
var childElement = ReactDOM.findDOMNode(child);
while (childElement && childElement.parentElement) {
if (childElement.parentElement === parentElement) {
return true;
}
childElement = childElement.parentElement;
}
return false;
};
DragDropHelper.prototype._isDraggable = function (target) {
var options = target.options;
return options.canDrag && options.canDrag(options.context.data);
};
DragDropHelper.prototype._isDroppable = function (target) {
// TODO: take the drag item into consideration to prevent dragging an item into the same group
var options = target.options;
var dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : null;
return options.canDrop && options.canDrop(options.context, dragContext);
};
return DragDropHelper;
}());
exports.DragDropHelper = DragDropHelper;
//# sourceMappingURL=DragDropHelper.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 1 2 2 | "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(require("./DragDropHelper")); //# sourceMappingURL=index.js.map |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 1 1 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Route = (function (_super) {
__extends(Route, _super);
function Route() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Route;
}(React.Component));
exports.Route = Route;
//# sourceMappingURL=Route.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 6 6 6 1 6 6 6 1 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Router = (function (_super) {
__extends(Router, _super);
function Router() {
return _super !== null && _super.apply(this, arguments) || this;
}
Router.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'hashchange', function () { return _this.forceUpdate(); });
};
Router.prototype.render = function () {
return (React.createElement("div", null, this._resolveRoute()));
};
Router.prototype._getPath = function () {
var path = location.hash;
var index = path.lastIndexOf('#');
if (index > 0) {
path = path.substr(0, index);
}
return path;
};
Router.prototype._resolveRoute = function (path, children) {
var _this = this;
path = path || this._getPath();
children = children || this.props.children;
var routes = React.Children.toArray(children);
var _loop_1 = function (i) {
var route = routes[i];
if (_match(path, route)) {
var _a = route.props, component_1 = _a.component, getComponent_1 = _a.getComponent;
if (getComponent_1) {
var asynchronouslyResolved_1 = false;
if (getComponent_1.component) {
component_1 = getComponent_1.component;
}
else {
getComponent_1(function (resolved) {
component_1 = getComponent_1.component = resolved;
if (asynchronouslyResolved_1) {
_this.forceUpdate();
}
});
}
// Note: in webpack 2, this ends up always async.
asynchronouslyResolved_1 = true;
}
if (component_1) {
var componentChildren = this_1._resolveRoute(path, route.props.children || []);
if (componentChildren) {
return { value: React.createElement(component_1, { key: route.key }, componentChildren) };
}
else {
return { value: React.createElement(component_1, { key: route.key }) };
}
}
else if (getComponent_1) {
return { value: null };
}
}
};
var this_1 = this;
for (var i = 0; i < routes.length; i++) {
var state_1 = _loop_1(i);
if (typeof state_1 === "object")
return state_1.value;
}
return null;
};
return Router;
}(Utilities_1.BaseComponent));
exports.Router = Router;
function _match(currentPath, child) {
if (child.props) {
var path = child.props.path;
path = path || '';
currentPath = currentPath || '';
return ((!path) ||
(path.toLowerCase() === currentPath.toLowerCase()));
}
return false;
}
//# sourceMappingURL=Router.js.map
|
| 1 2 3 4 5 6 7 8 9 10 | 4 4 4 4 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Route_1 = require("./Route");
exports.Route = Route_1.Route;
var Router_1 = require("./Router");
exports.Router = Router_1.Router;
//# sourceMappingURL=index.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Selection.js | 2.61% | (4 / 153) | 0% | (0 / 101) | 0% | (0 / 24) | 2.68% | (4 / 149) | |
| SelectionLayout.js | 66.67% | (10 / 15) | 0% | (0 / 8) | 16.67% | (1 / 6) | 66.67% | (10 / 15) | |
| SelectionPage.js | 33.33% | (8 / 24) | 28.57% | (4 / 14) | 12.5% | (1 / 8) | 38.1% | (8 / 21) | |
| SelectionZone.js | 3.68% | (10 / 272) | 5.56% | (10 / 180) | 3.03% | (1 / 33) | 3.77% | (10 / 265) | |
| index.js | 77.78% | (7 / 9) | 50% | (1 / 2) | 100% | (1 / 1) | 71.43% | (5 / 7) | |
| interfaces.js | 100% | (11 / 11) | 100% | (4 / 4) | 100% | (2 / 2) | 100% | (11 / 11) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 | 10 10 10 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var interfaces_1 = require("./interfaces");
var Utilities_1 = require("../../Utilities");
var Selection = (function () {
function Selection(options) {
if (options === void 0) { options = {}; }
var onSelectionChanged = options.onSelectionChanged, getKey = options.getKey, _a = options.canSelectItem, canSelectItem = _a === void 0 ? function (item) { return true; } : _a;
this.getKey = getKey || (function (item, index) { return (item ? item.key : String(index)); });
this._changeEventSuppressionCount = 0;
this._exemptedCount = 0;
this._anchoredIndex = 0;
this._unselectableCount = 0;
this.setItems([], true);
this._onSelectionChanged = onSelectionChanged;
this.canSelectItem = canSelectItem;
}
Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {
this._changeEventSuppressionCount += isEnabled ? -1 : 1;
if (this._changeEventSuppressionCount === 0 && this._hasChanged) {
this._hasChanged = false;
if (!suppressChange) {
this._change();
}
}
};
/**
* Selection needs the items, call this method to set them. If the set
* of items is the same, this will re-evaluate selection and index maps.
* Otherwise, shouldClear should be set to true, so that selection is
* cleared.
*/
Selection.prototype.setItems = function (items, shouldClear) {
if (shouldClear === void 0) { shouldClear = true; }
var newKeyToIndexMap = {};
var newUnselectableIndices = {};
var hasSelectionChanged = false;
this.setChangeEvents(false);
// Reset the unselectable count.
this._unselectableCount = 0;
// Build lookup table for quick selection evaluation.
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item) {
newKeyToIndexMap[this.getKey(item, i)] = i;
}
newUnselectableIndices[i] = item && !this.canSelectItem(item);
if (newUnselectableIndices[i]) {
this._unselectableCount++;
}
}
if (shouldClear) {
this.setAllSelected(false);
}
// Check the exemption list for discrepencies.
var newExemptedIndicies = {};
for (var indexProperty in this._exemptedIndices) {
if (this._exemptedIndices.hasOwnProperty(indexProperty)) {
var index = Number(indexProperty);
var item = this._items[index];
var exemptKey = item ? this.getKey(item, Number(index)) : undefined;
var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;
if (newIndex === undefined) {
// We don't know the index of the item any more so it's either moved or removed.
// In this case we reset the entire selection.
this.setAllSelected(false);
break;
}
else {
// We know the new index of the item. update the existing exemption table.
newExemptedIndicies[newIndex] = true;
hasSelectionChanged = hasSelectionChanged || (newIndex !== index);
}
}
}
this._exemptedIndices = newExemptedIndicies;
this._keyToIndexMap = newKeyToIndexMap;
this._unselectableIndices = newUnselectableIndices;
this._items = items || [];
if (hasSelectionChanged) {
this._change();
}
this.setChangeEvents(true);
};
Selection.prototype.getItems = function () {
return this._items;
};
Selection.prototype.getSelection = function () {
if (!this._selectedItems) {
this._selectedItems = [];
for (var i = 0; i < this._items.length; i++) {
if (this.isIndexSelected(i)) {
this._selectedItems.push(this._items[i]);
}
}
}
return this._selectedItems;
};
Selection.prototype.getSelectedCount = function () {
return this._isAllSelected ? (this._items.length - this._exemptedCount - this._unselectableCount) : (this._exemptedCount);
};
Selection.prototype.isRangeSelected = function (fromIndex, count) {
var endIndex = fromIndex + count;
for (var i = fromIndex; i < endIndex; i++) {
if (!this.isIndexSelected(i)) {
return false;
}
}
return true;
};
Selection.prototype.isAllSelected = function () {
var selectableCount = this._items.length - this._unselectableCount;
return ((this.count > 0) &&
(this._isAllSelected && this._exemptedCount === 0) ||
(!this._isAllSelected && (this._exemptedCount === selectableCount) && selectableCount > 0));
};
Selection.prototype.isKeySelected = function (key) {
var index = this._keyToIndexMap[key];
return this.isIndexSelected(index);
};
Selection.prototype.isIndexSelected = function (index) {
return !!((this.count > 0) &&
(this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||
(!this._isAllSelected && this._exemptedIndices[index]));
};
Selection.prototype.setAllSelected = function (isAllSelected) {
var selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0;
if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {
this._exemptedIndices = {};
this._exemptedCount = 0;
this._isAllSelected = isAllSelected;
this._updateCount();
}
};
Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {
var index = this._keyToIndexMap[key];
if (index >= 0) {
this.setIndexSelected(index, isSelected, shouldAnchor);
}
};
Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {
// Clamp the index.
index = Math.min(Math.max(0, index), this._items.length - 1);
// No-op on out of bounds selections.
if (index < 0 || index >= this._items.length) {
return;
}
var isExempt = this._exemptedIndices[index];
var hasChanged = false;
var canSelect = !this._unselectableIndices[index];
if (canSelect) {
// Determine if we need to remove the exemption.
if (isExempt && ((isSelected && this._isAllSelected) ||
(!isSelected && !this._isAllSelected))) {
hasChanged = true;
delete this._exemptedIndices[index];
this._exemptedCount--;
}
// Determine if we need to add the exemption.
if (!isExempt && ((isSelected && !this._isAllSelected) ||
(!isSelected && this._isAllSelected))) {
hasChanged = true;
this._exemptedIndices[index] = true;
this._exemptedCount++;
}
if (shouldAnchor) {
this._anchoredIndex = index;
}
}
if (hasChanged) {
this._updateCount();
}
};
Selection.prototype.selectToKey = function (key, clearSelection) {
this.selectToIndex(this._keyToIndexMap[key], clearSelection);
};
Selection.prototype.selectToIndex = function (index, clearSelection) {
var anchorIndex = this._anchoredIndex || 0;
var startIndex = Math.min(index, anchorIndex);
var endIndex = Math.max(index, anchorIndex);
this.setChangeEvents(false);
if (clearSelection) {
this.setAllSelected(false);
}
for (; startIndex <= endIndex; startIndex++) {
this.setIndexSelected(startIndex, true, false);
}
this.setChangeEvents(true);
};
Selection.prototype.toggleAllSelected = function () {
this.setAllSelected(!this.isAllSelected());
};
Selection.prototype.toggleKeySelected = function (key) {
this.setKeySelected(key, !this.isKeySelected(key), true);
};
Selection.prototype.toggleIndexSelected = function (index) {
this.setIndexSelected(index, !this.isIndexSelected(index), true);
};
Selection.prototype.toggleRangeSelected = function (fromIndex, count) {
var isRangeSelected = this.isRangeSelected(fromIndex, count);
var endIndex = fromIndex + count;
this.setChangeEvents(false);
for (var i = fromIndex; i < endIndex; i++) {
this.setIndexSelected(i, !isRangeSelected, false);
}
this.setChangeEvents(true);
};
Selection.prototype._updateCount = function () {
this.count = this.getSelectedCount();
this._change();
};
Selection.prototype._change = function () {
if (this._changeEventSuppressionCount === 0) {
this._selectedItems = null;
Utilities_1.EventGroup.raise(this, interfaces_1.SELECTION_CHANGE);
if (this._onSelectionChanged) {
this._onSelectionChanged();
}
}
else {
this._hasChanged = true;
}
};
return Selection;
}());
exports.Selection = Selection;
//# sourceMappingURL=Selection.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var interfaces_1 = require("./interfaces");
var SelectionLayout = (function () {
function SelectionLayout(direction) {
this._direction = direction;
}
SelectionLayout.prototype.getItemIndexAbove = function (focusIndex, items) {
return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.max(0, focusIndex - 1) : focusIndex;
};
SelectionLayout.prototype.getItemIndexBelow = function (focusIndex, items) {
return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.min(items.length - 1, focusIndex + 1) : focusIndex;
};
SelectionLayout.prototype.getItemIndexLeft = function (focusIndex, items) {
return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.max(0, focusIndex - 1);
};
SelectionLayout.prototype.getItemIndexRight = function (focusIndex, items) {
return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.min(items.length - 1, focusIndex + 1);
};
return SelectionLayout;
}());
exports.SelectionLayout = SelectionLayout;
//# sourceMappingURL=SelectionLayout.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 2 2 2 1 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Selection_Basic_Example_1 = require("./examples/Selection.Basic.Example");
var SelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx');
var SelectionPage = (function (_super) {
__extends(SelectionPage, _super);
function SelectionPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SelectionPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Selection', componentName: 'SelectionExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Basic Selection Example', code: SelectionBasicExampleCode },
React.createElement(Selection_Basic_Example_1.SelectionBasicExample, null)), overview: React.createElement("div", null,
React.createElement("p", null, "Selection is a store that maintains the selection state of items in an efficient way. It exposes methods for accessing the selection state given an item index. If the items change, it can resolve the selection if items move in the array."),
React.createElement("p", null, "SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is."),
React.createElement("p", null, "SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute."),
React.createElement("p", null, "Available attributes:"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, "data-selection-index"),
": the index of the item being represented.This would go on the root of the tile/row."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-invoke"),
": this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-toggle"),
": this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-toggle-all"),
": this boolean flag indicates that clicking it should toggle all selection."),
React.createElement("li", null,
React.createElement("b", null, "data-selection-disabled"),
": allows a branch of the DOM to be marked to ignore input events that alter selections."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return SelectionPage;
}(React.Component));
exports.SelectionPage = SelectionPage;
//# sourceMappingURL=SelectionPage.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 | 2 2 2 1 2 2 2 2 2 1 | "use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var SelectionLayout_1 = require("./SelectionLayout");
var interfaces_1 = require("./interfaces");
// Selection definitions:
//
// Anchor index: the point from which a range selection starts.
// Focus index: the point from which layout movement originates from.
//
// These two can differ. Tests:
//
// If you start at index 5
// Shift click to index 10
// The focus is 10, the anchor is 5.
// If you shift click at index 0
// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.
// If you click index 8
// The anchor and focus are set to 8.
var SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';
var SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';
var SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';
var SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';
var SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';
var SelectionZone = (function (_super) {
__extends(SelectionZone, _super);
function SelectionZone() {
return _super !== null && _super.apply(this, arguments) || this;
}
SelectionZone.prototype.componentDidMount = function () {
var win = Utilities_1.getWindow(this.refs.root);
var scrollElement = Utilities_1.findScrollableParent(this.refs.root);
// Track the latest modifier keys globally.
this._events.on(win, 'keydown keyup', this._updateModifiers);
this._events.on(scrollElement, 'click', this._tryClearOnEmptyClick);
};
SelectionZone.prototype.render = function () {
return (React.createElement("div", __assign({ className: 'ms-SelectionZone', ref: 'root', onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onClick: this._onClick, onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu }, {
onMouseDownCapture: this._onMouseDownCapture,
onFocusCapture: this._onFocus
}), this.props.children));
};
/**
* In some cases, the consuming scenario requires to set focus on a row without having SelectionZone
* react to the event. Note that focus events in IE <= 11 will occur asynchronously after .focus() has
* been called on an element, so we need a flag to store the idea that we will bypass the "next"
* focus event that occurs. This method does that.
*/
SelectionZone.prototype.ignoreNextFocus = function () {
this._shouldHandleFocus = false;
};
SelectionZone.prototype._onMouseDownCapture = function (ev) {
if (document.activeElement !== ev.target && !Utilities_1.elementContains(document.activeElement, ev.target)) {
this.ignoreNextFocus();
}
};
/**
* When we focus an item, for single/multi select scenarios, we should try to select it immediately
* as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them
* specially.
*/
SelectionZone.prototype._onFocus = function (ev) {
var target = ev.target;
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
if (this._shouldHandleFocus && selectionMode !== interfaces_1.SelectionMode.none) {
var isToggle = this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);
var itemRoot = this._findItemRoot(target);
if (!isToggle && itemRoot) {
var index = this._getItemIndex(itemRoot);
if (isToggleModifierPressed) {
// set anchor only.
selection.setIndexSelected(index, selection.isIndexSelected(index), true);
}
else {
this._onItemSurfaceClick(ev, index);
}
}
}
this._shouldHandleFocus = false;
};
SelectionZone.prototype._onMouseDown = function (ev) {
this._updateModifiers(ev);
var target = ev.target;
var itemRoot = this._findItemRoot(target);
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
break;
}
else if (itemRoot) {
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
break;
}
else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
this._onInvokeMouseDown(ev, this._getItemIndex(itemRoot));
break;
}
else if (target === itemRoot) {
break;
}
}
target = Utilities_1.getParent(target);
}
};
SelectionZone.prototype._onClick = function (ev) {
this._updateModifiers(ev);
var target = ev.target;
var itemRoot = this._findItemRoot(target);
// No-op if selection is disabled
if (this._isSelectionDisabled(target)) {
return;
}
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
this._onToggleAllClick(ev);
break;
}
else if (itemRoot) {
var index = this._getItemIndex(itemRoot);
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
if (this._isShiftPressed) {
this._onItemSurfaceClick(ev, index);
}
else {
this._onToggleClick(ev, index);
}
break;
}
else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
this._onInvokeClick(ev, index);
break;
}
else if (target === itemRoot) {
this._onItemSurfaceClick(ev, index);
break;
}
}
target = Utilities_1.getParent(target);
}
};
SelectionZone.prototype._onContextMenu = function (ev) {
var target = ev.target;
var _a = this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;
if (onItemContextMenu) {
var itemRoot = this._findItemRoot(target);
if (itemRoot) {
var index = this._getItemIndex(itemRoot);
onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);
ev.preventDefault();
}
}
};
SelectionZone.prototype._isSelectionDisabled = function (target) {
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {
return true;
}
target = Utilities_1.getParent(target);
}
return false;
};
/**
* In multi selection, if you double click within an item's root (but not within the invoke element or input elements),
* we should execute the invoke handler.
*/
SelectionZone.prototype._onDoubleClick = function (ev) {
var target = ev.target;
if (this._isSelectionDisabled(target)) {
return;
}
var _a = this.props, selectionMode = _a.selectionMode, onItemInvoked = _a.onItemInvoked;
var itemRoot = this._findItemRoot(target);
if (itemRoot && onItemInvoked && selectionMode !== interfaces_1.SelectionMode.none && !this._isInputElement(target)) {
var index = this._getItemIndex(itemRoot);
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||
this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
break;
}
else if (target === itemRoot) {
this._onInvokeClick(ev, index);
break;
}
target = Utilities_1.getParent(target);
}
target = Utilities_1.getParent(target);
}
};
SelectionZone.prototype._onKeyDown = function (ev) {
this._updateModifiers(ev);
var target = ev.target;
if (this._isSelectionDisabled(target)) {
return;
}
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
var isSelectAllKey = ev.which === Utilities_1.KeyCodes.a && (this._isCtrlPressed || this._isMetaPressed);
var isClearSelectionKey = ev.which === Utilities_1.KeyCodes.escape;
// Ignore key downs from input elements.
if (this._isInputElement(target)) {
// A key was pressed while an item in this zone was focused.
this._shouldHandleFocus = true;
return;
}
// If ctrl-a is pressed, select all (if all are not already selected.)
if (isSelectAllKey && selectionMode === interfaces_1.SelectionMode.multiple && !selection.isAllSelected()) {
selection.setAllSelected(true);
ev.stopPropagation();
ev.preventDefault();
return;
}
// If escape is pressed, clear selection (if any are selected.)
if (isClearSelectionKey && selection.getSelectedCount() > 0) {
selection.setAllSelected(false);
ev.stopPropagation();
ev.preventDefault();
return;
}
var itemRoot = this._findItemRoot(target);
// If a key was pressed within an item, we should treat "enters" as invokes and "space" as toggle
if (itemRoot) {
var index = this._getItemIndex(itemRoot);
while (target !== this.refs.root) {
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
// For toggle elements, assuming they are rendered as buttons, they will generate a click event,
// so we can no-op for any keydowns in this case.
break;
}
else if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT') {
return false;
}
else if (target === itemRoot) {
if (ev.which === Utilities_1.KeyCodes.enter) {
this._onInvokeClick(ev, index);
ev.preventDefault();
return;
}
else if (ev.which === Utilities_1.KeyCodes.space) {
this._onToggleClick(ev, index);
ev.preventDefault();
return;
}
break;
}
target = Utilities_1.getParent(target);
}
// A key was pressed while an item in this zone was focused.
this._shouldHandleFocus = true;
}
};
SelectionZone.prototype._onToggleAllClick = function (ev) {
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
if (selectionMode === interfaces_1.SelectionMode.multiple) {
selection.toggleAllSelected();
ev.stopPropagation();
ev.preventDefault();
}
};
SelectionZone.prototype._onToggleClick = function (ev, index) {
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
if (selectionMode === interfaces_1.SelectionMode.multiple) {
selection.toggleIndexSelected(index);
}
else if (selectionMode === interfaces_1.SelectionMode.single) {
var isSelected = selection.isIndexSelected(index);
selection.setChangeEvents(false);
selection.setAllSelected(false);
selection.setIndexSelected(index, !isSelected, true);
selection.setChangeEvents(true);
}
else {
return;
}
ev.stopPropagation();
// NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior
// for checkboxes if you use a checkbox for the toggle.
};
SelectionZone.prototype._onInvokeClick = function (ev, index) {
var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;
if (onItemInvoked) {
onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);
ev.preventDefault();
ev.stopPropagation();
}
};
SelectionZone.prototype._onItemSurfaceClick = function (ev, index) {
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
if (selectionMode === interfaces_1.SelectionMode.multiple) {
if (this._isShiftPressed) {
selection.selectToIndex(index, !isToggleModifierPressed);
}
else if (isToggleModifierPressed) {
selection.toggleIndexSelected(index);
}
else {
this._clearAndSelectIndex(index);
}
}
else if (selectionMode === interfaces_1.SelectionMode.single) {
this._clearAndSelectIndex(index);
}
};
SelectionZone.prototype._onInvokeMouseDown = function (ev, index) {
var selection = this.props.selection;
// Only do work if item is not selected.
if (selection.isIndexSelected(index)) {
return;
}
this._clearAndSelectIndex(index);
};
SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {
if (!this.props.selectionPreservedOnEmptyClick &&
this._isNonHandledClick(ev.target)) {
this.props.selection.setAllSelected(false);
}
};
SelectionZone.prototype._clearAndSelectIndex = function (index) {
var selection = this.props.selection;
var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
if (!isAlreadySingleSelected) {
selection.setChangeEvents(false);
selection.setAllSelected(false);
selection.setIndexSelected(index, true, true);
selection.setChangeEvents(true);
}
};
/**
* We need to track the modifier key states so that when focus events occur, which do not contain
* modifier states in the Event object, we know how to behave.
*/
SelectionZone.prototype._updateModifiers = function (ev) {
this._isShiftPressed = ev.shiftKey;
this._isCtrlPressed = ev.ctrlKey;
this._isMetaPressed = ev.metaKey;
};
SelectionZone.prototype._findItemRoot = function (target) {
var selection = this.props.selection;
while (target !== this.refs.root) {
var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);
var index = Number(indexValue);
if (indexValue !== null && index >= 0 && index < selection.getItems().length) {
break;
}
target = Utilities_1.getParent(target);
}
if (target === this.refs.root) {
return undefined;
}
return target;
};
SelectionZone.prototype._getItemIndex = function (itemRoot) {
return Number(itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME));
};
SelectionZone.prototype._hasAttribute = function (element, attributeName) {
var isToggle = false;
while (!isToggle && element !== this.refs.root) {
isToggle = element.getAttribute(attributeName) === 'true';
element = Utilities_1.getParent(element);
}
return isToggle;
};
SelectionZone.prototype._isInputElement = function (element) {
return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
};
SelectionZone.prototype._isNonHandledClick = function (element) {
var doc = Utilities_1.getDocument();
if (doc && element) {
while (element && element !== doc.documentElement) {
if (Utilities_1.isElementTabbable(element)) {
return false;
}
element = Utilities_1.getParent(element);
}
}
return true;
};
return SelectionZone;
}(Utilities_1.BaseComponent));
SelectionZone.defaultProps = {
layout: new SelectionLayout_1.SelectionLayout(interfaces_1.SelectionDirection.vertical),
isMultiSelectEnabled: true,
isSelectedOnFocus: true,
selectionMode: interfaces_1.SelectionMode.multiple
};
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "ignoreNextFocus", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onMouseDownCapture", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onFocus", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onMouseDown", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onClick", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onContextMenu", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onDoubleClick", null);
__decorate([
Utilities_1.autobind
], SelectionZone.prototype, "_onKeyDown", null);
exports.SelectionZone = SelectionZone;
//# sourceMappingURL=SelectionZone.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 1 24 8 8 8 | "use strict";
function __export(m) {
for (var p in m) Eif (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./interfaces"));
__export(require("./Selection"));
__export(require("./SelectionLayout"));
__export(require("./SelectionZone"));
//# sourceMappingURL=index.js.map
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 1 1 1 1 1 1 1 1 1 1 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SELECTION_CHANGE = 'change';
var SelectionMode;
(function (SelectionMode) {
SelectionMode[SelectionMode["none"] = 0] = "none";
SelectionMode[SelectionMode["single"] = 1] = "single";
SelectionMode[SelectionMode["multiple"] = 2] = "multiple";
})(SelectionMode = exports.SelectionMode || (exports.SelectionMode = {}));
var SelectionDirection;
(function (SelectionDirection) {
SelectionDirection[SelectionDirection["horizontal"] = 0] = "horizontal";
SelectionDirection[SelectionDirection["vertical"] = 1] = "vertical";
})(SelectionDirection = exports.SelectionDirection || (exports.SelectionDirection = {}));
//# sourceMappingURL=interfaces.js.map
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| PhantomCssInterface.js | 100% | (1 / 1) | 100% | (0 / 0) | 100% | (0 / 0) | 100% | (1 / 1) |
| 1 2 3 4 5 6 | 1 | "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=PhantomCssInterface.js.map
|